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

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

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

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

background-color: rgba(0, 0, 0, 0.45);

правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
opacity	4.0	2.0	3.1	9.0	9.0

Підтримка: мобільні переглядачі

Переглядач
opacity	1.0	1.0	3.2

Приклади

+ запропонувати свій приклад у пісочниці

<div class="half">opacity: 0.5 — напівпрозорий</div>
<div>Непрозорий для порівняння</div>

div {
    background: #0172ad;
    color: #fff;
    padding: 10px;
    margin-bottom: 6px;
}

.half {
    opacity: 0.5;
}