请选择 进入手机版 | 继续访问电脑版

好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

[HTML5] 好程序员web前端培训分享CSS3颜色值HSLA表示方式 

[复制链接]
叶子老师 发表于 2019-5-16 17:16:25 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
好程序员web前端培训分享CSS3颜色值HSLA表示方式,说明:本文档兼容性测试基础环境为:windows系统;IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
说明:
HSLA(H,S,L,A)

取值:
H:
Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
S:
Saturation(饱和度)。取值为:0.0% - 100.0%
L:
Lightness(亮度)。取值为:0.0% - 100.0%
A:
Alpha透明度。取值0~1之间。

说明:
HSL记法。
此色彩模式与HSL相同,只是在HSL模式上新增了Alpha透明度。


兼容性:
QQ截图20190516164505.png
示例代码(自行找测试的地方啊)
1. <!DOCTYPE html>
2. <html lang="zh-cn">
3. <head>
4. <meta charset="utf-8" />
5. <title>HSL_CSS参考手册_web前端开发参考手册系列</title>
6. <style>
7. .test{background-color:hsla(360,50%,50%,0.5);}
8. </style>
9. </head>
10. <body>
11. <div class="test">能看到此行背景说明你的浏览器支持HSLA色彩记法</div>
12. </body>
  13.</html>
好程序员web前端培训官网:http://www.goodprogrammer.org/html5_class.shtml

精彩内容,一键分享给更多人!
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
好程序员
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启