css властивість opacity
CSS властивість opacity задає рівень прозорості для елемента, таким чином, щоб він став напівпрозорим, або навіть невидимим. Без задання будь-який елемент має 100% непрозорість.
При частковій чи повній прозорості, алемент буде розміщено на новому шарі і крізь елемент буде проступати його фоновий малюнок, чи його батьківський елемент, також інші елементи з меншим значенням властивісті z-index (Тобто будуть проступати ті, елементи, що знаходяться під напівпрозорим елементом).
Непрозорість застосовується до елемента в цілому, включаючи його вміст, навіть якщо значення не успадковується дочірними елементами. Саме тому, елемент та його нащадки мають однакову непрозорість відносно фону, навіть якщо вони мають різну непрозорість відносно один одного. Якщо ти не хочеш застосовувати opacity для нащадків, використовуй властивість background-color.
background-color: rgba(0, 0, 0, 0.45);
| Нотатка: | Непрозорість може бути використана як альтернатива властивості |
Синтаксис
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;
}