Цвета CSS3
CSS поддерживает цветовые имена, шестнадцатеричном и RGB цвета.
Кроме того, CSS3 также вводит:
- RGBA цвета
- HSL цвета
- HSLA цвета
- помутнение
Поддержка браузеров
Числа в таблице указать первую версию браузера, который полностью поддерживает цветовые значения CSS3 / свойства.
| Имущество | |||||
|---|---|---|---|---|---|
| RGBA, HSL, and HSLA | 4.0 | 9.0 | 3.0 | 3.1 | 10.1 |
| помутнение | 4.0 | 9.0 | 2,0 | 3.1 | 10.1 |
RGBA Цвета
Цветовые значения RGBA являются расширением цветовых значений RGB с alpha - каналом - который определяет непрозрачность цвета.
Значение цвета RGBA задается: RGBA (красный, зеленый, синий, alpha ). alpha - параметр представляет собой число в диапазоне от 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);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue
with opacity */
Попробуй сам " HSL Цвета
HSL означает Hue, насыщенность и яркость.
Значение цвета HSL задается: HSL (оттенок, насыщенность, яркость).
- Оттенок степень на цветовом колесе (от 0 до 360):
- 0 (или 360) красный
- 120 зеленый
- 240 синий
- Насыщенность представляет собой процентное значение: 100% является полный цвет.
- Освещенность также процент; 0% темно (черный) и 100% белый.
Следующий пример определяет различные цвета HSL:
пример
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark
green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
Попробуй сам " HSLA Цвета
Значения цвета HSLA являются продолжением цветовых значений HSL с alpha - каналом - который определяет непрозрачность цвета.
Значение цвета HSLA задается: HSLA (оттенок, насыщенность, яркость, alpha ), где alpha - параметр определяет непрозрачность. alpha - параметр представляет собой число в диапазоне от 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный).
Следующий пример определяет различные цвета HSLA:
пример
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark
green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green
with opacity */
Попробуй сам " помутнение
Свойство CSS3 непрозрачности устанавливает непрозрачность для заданного значения RGB.
Значение свойства непрозрачности должно быть число между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный).
Обратите внимание на то, что выше текст также будет непрозрачным.
Следующий пример показывает различные значения RGB с непрозрачностью:
пример
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity
*/
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with
opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue
with opacity */
Попробуй сам " Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»