• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • hsla()

    版本:CSS3

    颜色可以使用hsla()函数符在色相-饱和度-明度-阿尔法(HSLa)模式下被定义。HSLa 扩展自 HSL 颜色模式,包含了阿尔法通道,可以规定一个颜色的透明度。
    a表示透明度:0=透明;1=不透明;

    示例

    hsla(240,100%,50%,0.05)   /* 5% opaque blue */   
    hsla(240,100%,50%, 0.4)   /* 40% opaque blue */  
    hsla(240,100%,50%, 0.7)   /* 70% opaque blue */  
    hsla(240,100%,50%,   1)   /* full opaque blue */ 
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持hsla()

    语法

    hsla(H,S,L,A)

    使用HSL圆柱坐标(HSL cylindrical-coordinate)系统(以hsl()hsla()函数表达式的形式)

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>document</title>
    	<style type="text/css">
    		div{
    			
    		background-color:hsl(360,50%,50%,.5);
    
    		}
    
    	</style>
    </head>
    <body>
    	<div>hsla颜色值</div>
    	
    </body>
    </html>
    

    效果图:

    上篇:hsl()

    下篇:transparent