CSS HSL和HSLA颜色和透明度,实例在线编辑
HSL颜色
CSS的HSL指的是通过色相(hue)、饱和度saturation和名都lightness来设置颜色,格式为:
hsl(hue, satruration, lightness)
各参数的值如下表:
参数 | 描述 |
---|---|
hue | 表示色相,通常表现为色轮,值从0到360,0为红色,120为绿色,240为蓝色(仍然是基于红绿蓝三原色)。 |
saturation | 饱和度,值为百分比,0%表示饱和度为0,表现为灰色阴影,100%饱和度百分之百,表示全色。 |
lightness | 名都,值为百分比,0%为黑色,100%为白色。50%的话,可较为鲜明地表现出色相上的颜色。 |
HSL颜色实例代码,及在线编辑器
<p id='e1'>这是个段落,颜色为蓝色,将通过HSL格式来设置。</p>
<style>
#e1{color:hsl(240,100%,50%)}
</style>
HSLA设置颜色透明度
HSLA与HSL基本类似,但是多了一个A参数用于设置颜色的透明度,值可用百分比或小数点来表示,实例代码如下:
<div class='e2'></div>
<style>
.e2{width:100%;height:60px;background-color:hsla(120,100%,50%,0.1)}
</style>