Цвета CSS
Цвет в CSS можно записать одним из более чем 140 названий или значением HEX, RGB, RGBA, HSL либо HSLA, а ещё есть прозрачность.
Цвета RGBA
Возьмите цвет RGB, добавьте альфа-канал для управления его прозрачностью — и получите RGBA.
Запись выглядит так: rgba(red, green, blue, alpha).
Альфа — это число от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
Пример
Три абзаца, у каждого свой фон RGBA.
Output: complete HTML page "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RGBA Colors</title>
</head>
<body>
<h1>RGBA Colors</h1>
<p style="background-color:rgba(255,0,0,0.3);padding:20px;">rgba(255, 0, 0, 0.3) - red with opacity</p>
<p style="background-color:rgba(0,255,0,0.3);padding:20px;">rgba(0, 255, 0, 0.3) - green with opacity</p>
<p style="background-color:rgba(0,0,255,0.3);padding:20px;">rgba(0, 0, 255, 0.3) - blue with opacity</p>
</body>
</html>
Синтаксис RGBA
rgba(red, green, blue, alpha)
Значения прозрачности RGBA
Здесь красный цвет остаётся неизменным, а значение альфа меняется.
rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);
Цвета HSLA
HSLA строится по той же идее на основе HSL: дополнительный альфа-канал определяет, насколько непрозрачен цвет.
Запись выглядит так: hsla(hue, saturation, lightness, alpha).
И здесь альфа принимает значения от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
Пример
Четыре абзаца, у каждого свой фон HSLA.
Output: complete HTML page "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HSLA Colors</title>
</head>
<body>
<h1>HSLA Colors</h1>
<p style="background-color:hsla(120,100%,50%,0.3);padding:20px;">hsla(120, 100%, 50%, 0.3) - green with opacity</p>
<p style="background-color:hsla(120,100%,75%,0.3);padding:20px;">hsla(120, 100%, 75%, 0.3) - light green with opacity</p>
<p style="background-color:hsla(120,100%,25%,0.3);padding:20px;">hsla(120, 100%, 25%, 0.3) - dark green with opacity</p>
<p style="background-color:hsla(120,60%,70%,0.3);padding:20px;">hsla(120, 60%, 70%, 0.3) - pastel green with opacity</p>
</body>
</html>
Синтаксис HSLA
hsla(hue, saturation, lightness, alpha)
Значения прозрачности HSLA
Здесь красный оттенок и прозрачность 0.3 остаются неизменными, а светлота меняется.
hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);
Свойство opacity в CSS
Свойство opacity действует не на один цвет, а на весь элемент, поэтому цвет его фона и текст становятся прозрачными вместе.
Его значение должно быть числом от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
Примечание: Любой текст в элементе получает ту же прозрачность или непрозрачность.
Пример
Все три абзаца сочетают цвет фона RGB с прозрачностью 0.6.
Output: complete HTML page "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Opacity Property</title>
</head>
<body>
<h1>CSS opacity Property</h1>
<p style="background-color:rgb(255,0,0);opacity:0.6;padding:20px;">rgb(255, 0, 0) with opacity 0.6 - red with opacity</p>
<p style="background-color:rgb(0,255,0);opacity:0.6;padding:20px;">rgb(0, 255, 0) with opacity 0.6 - green with opacity</p>
<p style="background-color:rgb(0,0,255);opacity:0.6;padding:20px;">rgb(0, 0, 255) with opacity 0.6 - blue with opacity</p>
<p>Notice that the text inside the elements is also transparent!</p>
</body>
</html>