Руководство CSS

Правила CSS (RULES)

Полный список свойств CSS

Функция hsla() CSS

Онлайн пример

Определение цвета HSL и установка прозрачности:

Пример

<!DOCTYPE html>
<title>Основной учебник (oldtoolbag.com)</title>　
<style>
body {
　　　　background: url('/run/images/bg2.png') beige;
　　　　color: hsla(0, 0%, 0%, 1);
　　　　font-size: 2em;
　}
article {　
　　　　background-color: hsla(30, 100%, 50%, 0.5);
　　　　border: 5px solid darkorange;
　　　　margin: 20px;
　　　　text-align: center;
　　　　}
</style>
</head>
<body>
<article>
<h1>Stars</h1>
</article>
</body>
</html>

Тестирование看看 ‹/›

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

Функция hsla() использует тон, насыщенность, яркость и прозрачность для определения цвета.

HSL - это тон, насыщенность, яркость, прозрачность (на английском: Hue, Saturation, Lightness, Alpha).

Тон (H)Это базовый атрибут цвета, то, что обычно называется именем цвета, например, красный, желтый и т.д.
Насыщенность (S)Это степень чистоты цвета, чем выше, тем цвет чище, а низкий уровень постепенно становится серым, значение от 0 до 100%.
Яркость (L) Выбор от 0 до 100%, увеличивает яркость, цвет будет изменяться в белый; уменьшает яркость, цвет будет изменяться в черный.
Прозрачность (A) Значение от 0 до 1,代表着透明度。

Поддерживаемые версии: CSS3

Совместимость браузеров

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

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

Грамматика CSS

hsla(hue, saturation, lightness, alpha)

Значение	Описание
hue - тон	Определяет тон (0 до 360) - 0 (или 360) как красный, 120 как зелёный, 240 как синий
saturation - насыщенность	Определяет насыщенность; 0% как серый, 100% как полная окраска
lightness -亮度	Определяет亮度 0% как тёмный, 50% как обычный, 100% как белый
alpha - прозрачность	Определяет прозрачность 0 (полностью прозрачный) ~ 1 (полностью непрозрачный)

Изменения alpha

Ниже представлен пример повторения одного и того же цвета несколько раз (на фоновом изображении), но с различным значением alpha для каждого цвета.

Все другие значения одинаковы (т.е., все строки тона, насыщенности и освещенности одинаковы), изменяется только канал alpha.

Это означает, что с увеличением значения alpha, фоновое изображение становится все менее видимым (звезды являются фоновым изображением).

Синий

`hsla(240, 100%, 50%, 0)`
`hsla(240, 100%, 50%, 0.1)`
`hsla(240, 100%, 50%, 0.2)`
`hsla(240, 100%, 50%, 0.3)`
`hsla(240, 100%, 50%, 0.4)`
`hsla(240, 100%, 50%, 0.5)`
`hsla(240, 100%, 50%, 0.6)`
`hsla(240, 100%, 50%, 0.7)`
`hsla(240, 100%, 50%, 0.8)`
`hsla(240, 100%, 50%, 0.9)`
`hsla(240, 100%, 50%, 1)`

Настройка HSL

По сравнению с RGB-моделью, HSL-цветовая модель более интуитивна при настройке цветов. Особенно если вы знаете, как работает HSL.

Я уже写过 о hsl() Содержание функции, которая объясняет hsla()Ее функции более детализированы, чем здесь написано. Если не уверены, как устанавливать и настраивать базовый цвет, проверьте.

CSS функция

Правило @charset CSS Функции CSS