网站地图    收藏   

主页 > 专题教程 > css >

hsla()

来源:自学PHP网    时间:2018-02-08 10:48 作者: 阅读:

[导读] CSS hsla()函数扩展了HSL颜色模式,它包含了阿尔法通道,允许设定一个颜色的透明度。...

CSS hsla()函数扩展了HSL颜色模式,它包含了阿尔法通道,允许设定一个颜色的透明度。

颜色可以使用hsla()函数来表示。hsla()颜色扩展了HSL颜色模式,它包含了阿尔法通道,允许设定一个颜色的透明度。阿尔法通道0表示完全透明,1表示不透明。

下面的代码是使用hsla()函数的例子。

hsla(240,100%,50%,0.05)   /* 5%透明度的蓝色 */  
hsla(240,100%,50%, 0.4)   /* 40%透明度的蓝色 */ 
hsla(240,100%,50%, 0.7)   /* 70%透明度的蓝色 */ 
hsla(240,100%,50%,   1)   /* 蓝色 */  

下面的例子是通过hsla()函数为元素设置不同背景色的效果。

hsla(200, 100%, 50%, .1)
hsla(200, 100%, 50%, .3)
hsla(200, 100%, 50%, .5)
hsla(200, 100%, 50%, .7)
hsla(200, 100%, 50%, 1)
浏览器支持

所有的现代浏览器都支持颜色属性。包括:Chrome, Firefox, Safari, Opera, IE 和 Android 和 iOS。

在IE浏览器中,只有IE9+浏览器才支持,hsla()rgba()transparent关键字和currentColor关键字。

最新评论

添加评论

更多文章推荐

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论