Функция CSS hsla()

Пример

Определение различных цветов HSL с непрозрачностью:

#p1 {background-color:hsla(120,100%,50%,0.3);} /* Green */
#p2 {background-color:hsla(120,100%,75%,0.3);} /* Light green */
#p3 {background-color:hsla(120,100%,25%,0.3);} /* Dark green */
#p4 {background-color:hsla(120,60%,70%,0.3);} /* Soft green */

Попробуйте сами

Определение и использование

Функция hsla() использует модель hue-saturation-lightness-alpha (HSLA) для определения цвета.

Цветовые значения HSLA являются расширением значений HSL, с каналом Alpha - этот канал specifies прозрачность цвета.

Версия: CSS3

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает эту функцию.

Функция
hsla() 1.0 9.0 3.0 3.1 10.0

CSS синтаксис

hsla(色调, насыщенность, светлость, alpha)
Значение Описание
色调 Определение угла на цветовом круге (от 0 до 360) - 0 (или 360) - красный, 120 - зеленый, 240 - синий.
насыщенность Определение насыщенности - 0% составляет градацию серого, а 100% - полная цветность (полная насыщенность).
светлость Определение яркости - 0% это черный цвет, 50% это нормальный цвет, 100% это белый цвет.
alpha Определение непрозрачности - это число между 0.0 (полностью прозрачный) и 1.0 (абсолютно непрозрачный).