CSS поддерживает более 140 названий цветов, значения HEX, значения RGB, RGBA. значения, значения HSL, значения HSLA и непрозрачность.
Цветовые значения 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);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue
with opacity */
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
#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);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}
</style>
</head>
<body>
<h1>Define Colors With RGBA Values</h1>
<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
<p id="p4">Grey</p>
<p id="p5">Yellow</p>
<p id="p6">Cerise</p>
</body>
</html>
HSL означает оттенок, насыщенность и яркость.
Значение цвета 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 */
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
#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%);}
#p5 {background-color:hsl(290,100%,50%);}
#p6 {background-color:hsl(290,60%,70%);}
</style>
</head>
<body>
<h1>Define Colors With HSL Values</h1>
<p id="p1">Green</p>
<p id="p2">Light green</p>
<p id="p3">Dark green</p>
<p id="p4">Pastel green</p>
<p id="p5">Violet</p>
<p id="p6">Pastel violet</p>
</body>
</html>
Цветовые значения HSLA являются расширением цветовых значений HSL с альфа-каналом, который определяет непрозрачность. для цвета.
Значение цвета HSLA указывается с помощью: hsla(оттенок, насыщенность, яркость, альфа), где Параметр альфа определяет непрозрачность. Параметр альфа представляет собой число от 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 */
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
#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);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>
<body>
<h1>Define Colors With HSLA Values</h1>
<p id="p1">Green</p>
<p id="p2">Light green</p>
<p id="p3">Dark green</p>
<p id="p4">Pastel green</p>
<p id="p5">Violet</p>
<p id="p6">Pastel violet</p>
</body>
</html>
Свойство CSS opacity
задает непрозрачность для весь элемент (и цвет фона, и текст будут непрозрачными/прозрачными).
Значение свойства opacity
должно быть числом от 0,0 (полностью прозрачно) до 1,0 (полностью непрозрачно).
Обратите внимание, что текст выше также будет прозрачный/непрозрачный!
В следующем примере показаны различные элементы с непрозрачностью:
#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 */
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
#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;}
#p4 {background-color:rgb(192,192,192);opacity:0.6;}
#p5 {background-color:rgb(255,255,0);opacity:0.6;}
#p6 {background-color:rgb(255,0,255);opacity:0.6;}
</style>
</head>
<body>
<h1>Define Colors With Opacity</h1>
<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
<p id="p4">Grey</p>
<p id="p5">Yellow</p>
<p id="p6">Cerise</p>
</body>
</html>