Новини високих технологій
» » Властивість CSS opacity: управління прозорістю

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

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

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

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

selector {
opacity: 1;
}

selector {
opacity: 0;
}

selector {
opacity: 0.4;
}

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

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

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

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

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

  parent {
opacity: 0.7;
}

child {
opacity: 1;
}

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

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

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

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

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

<

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

  .target {
opacity: 0.2;
}

.target:hover {
opacity: 1;
}

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

Останній приклад демонструє, що прозорі елементи продовжують реагувати на події сторінки, такі як наведення курсору. Це дозволяє використовувати jаvascript для керування властивостями 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.
Цікаво по темі
Функція strpos в PHP: визначення позиції підрядка
Функція strpos в PHP: визначення позиції підрядка
Пошук входження підрядка в рядок за допомогою функції PHP strpos(). Типи вхідних і вихідних параметрів, приклади і тонкощі використання. Схожі
Box-sizing в CSS: обчислення розмірів блоку
Box-sizing в CSS: обчислення розмірів блоку
Блокова модель CSS, визначення реального розміру елемента. Область рамки, внутрішніх відступів і контенту. Зміна алгоритму обчислення розмірів за
Властивість CSS margin: зовнішні відступи елементів
Властивість CSS margin: зовнішні відступи елементів
Визначення зовнішніх відступів елементів за допомогою властивості CSS margin. Груповий синтаксис і завдання маргинов окремо для кожної сторони.
PHP array_search: пошук значення в масиві
PHP array_search: пошук значення в масиві
Пошук значення в масиві за допомогою функції PHP array_search. Синтаксис, вхідні параметри і значення, що повертається. Механізм пошуку, залежність
Прозорість тегів: CSS opacity
Прозорість тегів: CSS opacity
Дизайн сайту і його діалог з відвідувачем ефективно можна виконати за допомогою ефекту прозорості...
Швидкі і оригінальні CSS hover ефекти
Швидкі і оригінальні CSS hover ефекти
Сайт, який зроблений швидко, без зайвих наворотів і помітних витрат, з пристойним дизайном і повноцінним ...