CSS поддерживает 140 + названия цветов, HSL шестнадцатеричные значения, значения RGB, значения RGBA, значения HSL, значения HSLA и непрозрачность.
RGBA Цвета
RGBA значения цвета являются расширением значений цвета RGB с альфа каналом, который определяет непрозрачность для цвета.
Значение цвета RGBA указывается с помощью rgba (красный, зеленый, синий, альфа).
Параметр alpha является числом между 0.0 (полностью прозрачный)
и 1.0 (полностью непрозрачный).
В следующем примере определяются различные цвета RGBA:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* красный с непрозрачностью */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* зеленый с непрозрачностью */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* синий с непрозрачностью */
Попробуйте сами »
HSL Цвета
HSL означает Оттенок, Насыщенность и Яркости.
Цвет значения HSL указано: 0.0hsl(оттенок, насыщенность, яркость).
- Оттенок - это градус на цветовом круге (от 0 до 360):
- 0 (или 360) красный
- 120 зеленый
- 240 синий
- Насыщенность - это процентное значение:
100%- полный цвет. - Яркость - также в процентах;
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 (оттенок, насыщенность, яркость, альфа), где
параметр alpha определяет непрозрачность. Параметр alpha - это число от 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);} /* ярко зеленый с непрозрачностью */
Попробуйте сами »
Непрозрачность
Свойство 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;} /* синий с непрозрачностью */
Попробуйте сами »