HSLA 值
HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了颜色的不透明度。
HSLA 颜色值指定为:
hsla(hue, saturation, lightness, alpha)
alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字:
请通过混合以下 HSLA 值进行实验:
实例代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
h1{
width:300px;
text-align:center;
}
</style>
</head>
<body>
<h1>HSLA 颜色透明值</h1>
<h1 style="background-color:hsl(9,100%,64%,0);">hsl(9,100%,64%,0)</h1>
<h1 style="background-color:hsl(9,100%,64%,0.2);">hsl(9,100%,64%,0.2)</h1>
<h1 style="background-color:hsl(9,100%,64%,0.4);">hsl(9,100%,64%,0.4)</h1>
<h1 style="background-color:hsl(9,100%,64%,0.6);">hsl(9,100%,64%,0.6)</h1>
<h1 style="background-color:hsl(9,100%,64%,0.8);">hsl(9,100%,64%,0.8)</h1>
<h1 style="background-color:hsl(9,100%,64%,1);">hsl(9,100%,64%,1)</h1>
<p>你可以使用HSLA颜色值生成透明色</p>
</body>
</html>
运行效果:
评论