css 中HSLA()函数功能简介


摘要:
下文讲述css中hsla函数的功能简介及举例


css hsla函数功能说明


hsla函数用于返回一个css可以识别的颜色值类似于十六进制颜色值和颜色名称;

hsla函数是基于hsl函数上的一种扩展;
hsla函数是在hsl函数后面加入了一个透明度选项,使用设定的颜色值上可以继续设置其颜色透明度。
hsla函数语法:
hsla(h,s,l,a)
—-参数说明——

a:代表透明,取值为(0~1之间) 0—完全透明,1—完全不透明

css hsla属性目前只支持以下浏览器:
1.IE9+浏览器支持此属性值。
2.edge浏览器支持此属性值。
3.火狐浏览器支持此属性值。
4.谷歌浏览器支持此属性值。
5.opera浏览器支持此属性值。
6.safria浏览器支持此属性值。

css hsla函数举例说明


	
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.maomao365.com/" /> 
<title>猫猫教程(www.maomao365.com)---hsla函数用法应用举例说明</title>  
<style type="text/css">  
.a{background-color:hsla(120,100%,50%,0.1);}
.b{background-color:hsla(120,100%,50%,0.5);}
.c{background-color:hsla(120,100%,50%,1);} 
</style>  
</head>  
<body>  
<div class="a">猫猫教程--hsla函数用法</div>  
<div class="b">猫猫教程--hsla函数用法</div>  
<div class="c">猫猫教程--hsla函数用法</div>  
</body>  
</html>

css hsla函数用法简介

css hsla函数用法简介