Альфа-канал в CSS

19

Від автора: у всіх колірних системах в CSS є додатковий альфа компонент (канал), за допомогою якого можна встановити рівень прозорості. Про це і поговоримо в цій статті.

Наприклад, щоб встановити наполовину прозорий червоний колір тла блоку div з id genera, необхідно:

#genera {
background: rgba(255, 0, 0, 0.5);
}

Кольору з альфа компонентом особливо корисні для створення тіней і градієнтів, але їх можна застосовувати на будь-яких елементах, як і звичайні кольори, у тому числі і на рамках і тексті.

При додаванні альфа рівня використовуються колірні схеми rgba і # hsla-color hsla. Це не нові системи, а всього лише варіації rgb, hsl.

У системах rgba і # hsla-color hsla альфа рівень вимірюється від 0 до 1, де 0-це «повна прозорість», а 1 – повна непрозорість. Прозорий колір створюється за допомогою значень з плаваючою точкою; Колір зі значенням альфа, рівним 1 не відрізняється від кольору без альфа компонента.

Частково прозорий елемент буде відображатися з урахуванням кольору елементів під ним: здебільшого це елемент body.

Значення з плаваючою точкою, альфа-канал можна записувати як з нулем, так і без нього. Але стандартний запис «0.3» більш читане. Зверніть увагу, що запис кольору у форматі rgb (а не rgba), але з альфа компонентом призведе до того, що код не буде працювати. Те ж саме буде, якщо записати колір у форматі rgba, але забути вказати значення альфа-каналу.

Всі сучасні браузери підтримують альфа-канал, навіть IE9+. Початківці розробники часто плутаються між властивістю opacity і альфа прозорістю, з цього приводу я написав невелику статтю, в якій пояснюю різницю між ними.

Колір hex з альфа каналом?

Можна створювати hex кольору з альфа компонентом, такі кольори називаються шістнадцятковими:

#genera {
background: #ff000077;
}

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

#genera {
background: #f007;
}

Альфа-канал для шістнадцяткових кольорів – нова функція, і на даний момент працює тільки в альфа версіях браузерів. З цієї причини її не можна використовувати в роботі, якщо тільки ви не використовуєте компілятор типу Sass або PostCSS, які конвертують запис виду #rrggbbaa в rgba # hsla-color hsla або еквівалент.