css властивість opacity


CSS властивість opacity задає рівень прозорості для елемента, таким чином, щоб він став напівпрозорим, або навіть невидимим. Без задання будь-який елемент має 100% непрозорість.

Властивість `opacity`

При частковій чи повній прозорості, алемент буде розміщено на новому шарі і крізь елемент буде проступати його фоновий малюнок, чи його батьківський елемент, також інші елементи з меншим значенням властивісті z-index (Тобто будуть проступати ті, елементи, що знаходяться під напівпрозорим елементом).

Непрозорість застосовується до елемента в цілому, включаючи його вміст, навіть якщо значення не успадковується дочірними елементами. Саме тому, елемент та його нащадки мають однакову непрозорість відносно фону, навіть якщо вони мають різну непрозорість відносно один одного. Якщо ти не хочеш застосовувати opacity для нащадків, використовуй властивість background-color.

background-color: rgba(0, 0, 0, 0.45);
Нотатка:

Непрозорість може бути використана як альтернатива властивості visibility: hidden; Такий запис має той же ефект, що й opacity: 0;

Синтакс

opacity: <number>|initial|inherit|unset;

Властивість opacity може отримувати 4 значення:

number

Визначає прозорість. В діапазоні від 0.0 (повна прозорість) до 1.0 (непрозорість).Також дозволяється писати числа без нуля попереду, наприклад:

opacity: .5;

Будь-яке значення поза межами цього діапазону, хоча і є дійсним, але зводиться до найближчого значення дозволеного діапазону.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента

unset

Комбінація ключових слів initial і inherit. Встановлює значення властивості як inherit, якщо властивість успадковується від свого батька, в іншому випадку значення встановлюється як initial.

Значення без задання: 1
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.opacity="0.5"

Переглядачі

Переглядач
opacity

4.0

9.0

2.0

3.1

9.0

Переглядач
opacity

1.0

1.0

3.2

Приклади


Встановлюємо рівень прозорості елемента

Демонстрація роботи властивості

Синтаксис властивості

div {
    opacity: 0.5;
}

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів