css властивість opacity
CSS властивість opacity задає рівень прозорості для елемента, таким чином, щоб він став напівпрозорим, або навіть невидимим. Без задання будь-який елемент має 100% непрозорість.
При частковій чи повній прозорості, алемент буде розміщено на новому шарі і крізь елемент буде проступати його фоновий малюнок, чи його батьківський елемент, також інші елементи з меншим значенням властивісті z-index (Тобто будуть проступати ті, елементи, що знаходяться під напівпрозорим елементом).
Непрозорість застосовується до елемента в цілому, включаючи його вміст, навіть якщо значення не успадковується дочірними елементами. Саме тому, елемент та його нащадки мають однакову непрозорість відносно фону, навіть якщо вони мають різну непрозорість відносно один одного. Якщо ти не хочеш застосовувати opacity для нащадків, використовуй властивість background-color.
background-color: rgba(0, 0, 0, 0.45);
- Нотатка
-
Непрозорість може бути використана як альтернатива властивості
автор: Svitlanavisibility: hidden;Такий запис має той же ефект, що йopacity: 0;
Синтаксис
opacity: <number>|initial|inherit|unset;Властивість opacity може отримувати 4 значень:
-
number -
Визначає прозорість. В діапазоні від 0.0 (повна прозорість) до 1.0 (непрозорість).Також дозволяється писати числа без нуля попереду, наприклад:
opacity: .5;Будь-яке значення поза межами цього діапазону, хоча і є дійсним, але зводиться до найближчого значення дозволеного діапазону.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента
автор: Svitlana -
unset -
Комбінація ключових слів initial і inherit. Встановлює значення властивості як inherit, якщо властивість успадковується від свого батька, в іншому випадку значення встановлюється як initial.
автор: Svitlana
| Значення без задання: | 1 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.opacity="0.5" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 2 | 9 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Однакові блоки; у верхнього opacity: 0.5 — просвічує все: і тло, і текст.
HTML
<div class="half">opacity: 0.5 — напівпрозорий</div>
<div>Непрозорий для порівняння</div>CSS
div {
background: #0172ad;
color: #fff;
padding: 10px;
margin-bottom: 6px;
}
.half {
opacity: 0.5;
}Демонстрація роботи властивості
Встановлюємо рівень прозорості елемента
Коментарі
Коментарів ще немає — будьте першим!