Властивість CSS opacity: управління прозорістю

23 0 Новини високих технологій

Для керування прозорістю елементів сторінки використовується властивість CSS opacity. По специфікації воно застосовне до сайтів будь-якого типу і підтримується у всіх сучасних браузерах. З його допомогою можна створити цікавий дизайн або реалізувати зручне інтерактивна взаємодія з користувачем.

Можливі значення

Синтаксис властивості opacity в css виглядає так:

selector {
opacity: 1;
}

selector {
opacity: 0;
}

selector {
opacity: 0.4;
}

На вхід приймаються числові значення в діапазоні від 0 до 1. Параметр може представляти собою частки одиниці, при цьому в якості роздільника цілої та дробової частини у CSS використовується крапка.

Властивість CSS opacity: управління прозорістю

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

Якщо значення властивості відрізняється від нуля, то реальна прозорість буде обчислюватися як відсоток від деякого верхньої межі. У звичайній ситуації opacity: 1 визначає повну непрозорість елемента.

Прозорість дочірніх вузлів

Однак якщо елемент має батьків, прозорість якого відрізняється від одиниці, обчислення змінюється. Нащадок не може бути "прозорим", ніж будь-хто з його предків. Значення CSS-властивості opacity батьківського блоку стає верхньою межею прозорості дочірнього вузла.

  parent {
opacity: 0.7;
}

child {
opacity: 1;
}

У подібній ситуації елемент child буде на 30 % прозорим, незважаючи на те, що значення opacity дорівнює одиниці.

Властивість CSS opacity: управління прозорістю

Приклади використання

Приклад 1. Напівпрозорість. Необхідно, щоб під елементом target було видно основний фон блоку.

  .target {
background: black;
opacity: 0.5;
}

Напівпрозорим стає не тільки фон блоку target, але і текст.

<
Властивість CSS opacity: управління прозорістю

Приклад 2. Динамічне керування прозорістю. Значення властивості CSS opacity блоку target змінюється при наведенні на нього курсору.

  .target {
opacity: 0.2;
}

.target:hover {
opacity: 1;
}
Властивість CSS opacity: управління прозорістю

Динамічна прозорість

Останній приклад демонструє, що прозорі елементи продовжують реагувати на події сторінки, такі як наведення курсору. Це дозволяє використовувати javascript для керування властивостями CSS opacity, а також застосовувати механізми transition і animation для плавної зміни режиму відображення.

Щоб отримати доступ до прозорості з скрипта, потрібно звернутися до об'єкту style конкретного елемента.

  //отримання поточного значення прозорості 
var opacity = element.style.opacity;

//встановлення нового значення
element.style.opacity = 0.4;

Плавне зникнення блоку можна реалізувати з допомогою CSS-властивості transition:

  element {
opacity: 0.1;
transition: opacity 1000ms;
}

element:hover {
opacity: 0.8;
transition: opacity 2000ms;
}


Тепер вузол element при наведенні мишки буде змінювати прозорість від 10 до 80 % протягом однієї секунди, а при догляді курсору - тьмяніти до вихідного значення протягом двох секунд. Властивість CSS opacity в поєднанні з механізмом transition дозволяє створювати красиві ефекти.

Альфа-канал замість opacity

Головні тонкощі механізму opacity в CSS:
  • його дія поширюється не тільки на фон блоку, але і на його текстовий контент, який краще залишати чітким;
  • дочірні елементи не можуть бути менш прозорими, ніж батьківські.
  • Якщо ці ефекти ускладнюють життя верстальника, замість opacity слід використовувати просто прозорий фон, визначивши його значення в форматі RGBA або # hsla-color hsla.