CSS Цвета
CSS поддерживает 140+ названий цветов, HEX значения, RGB значения, RGBA значения, HSL значения, HSLA значения и полутона (непрозрачность).
RGBA Цвета
Цветовые значения RGBA являются расширением цветовых значений RGB с альфа-каналом, который определяет непрозрачность для цвета.
Значение цвета RGBA указывается с помощью: rgba (красный, зеленый, синий, альфа). Альфа-параметр - это число от 0,0 (полностью прозрачное) до 1,0 (полностью непрозрачное).
В следующем примере определяются разные цвета RGBA:
Пример
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red
with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* зеленый с непрозрачностью */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* синий с непрозрачностью */
Попробуйте сами »
HSL Цвета
HSL означает Hue, Saturation и Lightness (оттенок, насыщенность и яркость).
Значение цвета HSL указывается с помощью: hsl(hue, saturation, lightness).
- Hue (оттенок) - это градус на цветовом круге (от 0 до 360):
- 0 (или 360) - это красный (red)
- 120 - это зеленый (green)
- 240 - это синий (blue)
- Saturation (насыщенность) - это процентное значение: 100% это полный цвет.
- Lightness (яркость) - это также процент; 0% тёмный (черный) и 100% белый.
В следующем примере определяются разные цвета HSL:
Пример
#p1 {background-color: hsl(120, 100%, 50%);} /* зеленый */
#p2 {background-color: hsl(120, 100%, 75%);} /* светло-зеленый */
#p3 {background-color: hsl(120, 100%, 25%);} /* темно-зеленый */
#p4 {background-color: hsl(120, 60%, 70%);} /* пастельно-зеленый */
Попробуйте сами »
HSLA Цвета
Значения цвета HSLA являются расширением значений цвета HSL с альфа-каналом, который определяет непрозрачность для цвета.
Значение цвета HSLA задается с помощью: hsla (оттенок, насыщенность, яркость, альфа), где параметр альфа определяет непрозрачность. Альфа-параметр - это число от 0,0 (полностью прозрачное) до 1,0 (полностью непрозрачное).
В следующем примере определяются разные цвета HSLA:
Пример
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* зеленый с непрозрачностью */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* светло-зеленый с непрозрачностью */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* темно-зеленый с непрозрачностью */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* пастельно-зеленый с непрозрачностью */
Попробуйте сами »
Opacity - Непрозрачность
CSS свойство opacity устанавливает непрозрачность для всего элемента (цвет фона и текст будут непрозрачными/прозрачными).
Значение свойства opacity должно быть числом от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный).
Обратите внимание, что текст выше также будет прозрачным/непрозрачным!
В следующем примере показаны разные элементы с непрозрачностью:
Пример
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* красный с непрозрачностью
*/
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* зеленый с непрозрачностью */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* синий с непрозрачностью */
Попробуйте сами »
