颜色函数-hsl 与 hsla

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

国庆活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

我们也可以使用 hsl 的方式来表示一种颜色,hsl 表示三种东西,色相,饱和度,还有明度 ... 色相的值是从 0 到 360 度,饱和度是从 0 到 100% ,明度也是从 0 到 100% ...

hsl 这个函数可以根据这三个东西的值来创建颜色 ... 比如我们想要纯红色 ... 先用一个 hsl 函数 ... 色相的值设置成 0 度 ... 饱和度是 100% ... 明度是 50% ...

body {
background-color: hsl(0, 100%, 50%);
}

你会看到,得到的结果是用字符表示的颜色,red 就是红色 ... 这里我们再把色相的值设置成 60 ... 饱和度与明度不变 ... 保存 ... 结果会是 yellow ... 黄色 ...

想要颜色里面加上 alpha 通道,也就是设置颜色的不透明度 ... 可以使用 hsla 这个函数 ... 前三个值仍然是色相,饱和度还有明度 ... 最后一个值用来表示颜色的不透明度 ... 是从 0 到 1 之间的数字,0 表示完全透明,1 表示完全不透明 ... 这里我们设置成 0.5 ...

background-color: hsla(0, 100%, 50%, 0.5);

保存 ... 你会发现,输出的 CSS 里面,会用 rgba 这个函数来表示 ... 也就是 Sass 会把用 hsla 表示的颜色,转换成用 rgba 表示的颜色 ...

在浏览器打开使用这个样式表的页面 ... 这里你会看到,页面的背景是半透明的黄色 ...

http://sass-lang.com/documentation/Sass/Script/Functions.html#hsl_functions

颜色函数-hsl 与 hsla《 Sass 基础 》

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点