数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会科学
时尚学
法学CSS3 的 RGBA、HSL 和 HSLA 颜色值
CSS3 支持 RGBA、HSL、HSLA 和其他颜色值。此外，还提供了 100 多种颜色名称。
CSS3 RGBA
CSS3 RGBA 颜色值为红色、绿色、蓝色和阿尔法。阿尔法是颜色不透明度，即 0.0 到 1.0 之间的一个数字。这里，1.0 表示完全不透明。这里，我们可以看到使用 RGBA 中的阿尔法参数创建的不透明度的差异。
示例
现在让我们看一个使用 RGBA 颜色值在网页上设置背景颜色的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color:rgba(108,111,35,0.6);}
#demo2 {background-color:rgba(108,111,35,0.5);}
#demo3 {background-color:rgba(108,111,35,0.4);}
#demo4 {background-color:rgba(108,111,35,0.3);}
#demo5 {background-color:rgba(108,111,35,0.2);}
#demo6 {background-color:rgba(108,111,35,0.1);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>
CSS3 HSL
为元素设置颜色时，CSS3 和 HSL 用于色相、饱和度和亮度。色相值从 0 到 260，其中 0 或 360 表示红色，240 表示蓝色，而 120 表示绿色。饱和度和亮度是百分比值。
示例
现在让我们看一个使用 HSL 颜色值在网页上设置背景颜色的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsl(150, 100%, 50%);}
#demo2 {background-color: hsl(150, 100%, 50%);}
#demo3 {background-color: hsl(140, 100%, 40%);}
#demo4 {background-color: hsl(120, 100%, 40%);}
#demo5 {background-color: hsl(120, 100%, 30%);}
#demo6 {background-color:rgba(108,111,35,0.6);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>
CSS3 HSLA
HSLA 颜色值用于色度、饱和度、明度和 Alpha。Alpha 是颜色的不透明度，即介于 0.0 和 1.0 之间的数字。其中，0.0 表示完全透明，而 1.0 表示完全不透明。
示例
现在让我们看一个使用 HSLA 颜色值设置网页背景颜色的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {background-color:rgba(108,111,35,0.6);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>
更新日期：31-Oct-2023
178 次浏览
广告