CSS HSLA()

admin發表於2018-09-26
原文網址 : https://www.softwhy.com/article-9278-1.html
CSS

關於HSL()用法可以參閱CSS HSL()一章節。

HSLA()在HSL()基礎上增加了一個透明度效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:300px;
  height:20px;
}
div.one { 
  background:hsla(320, 100%, 50%,0); 
}  
div.two { 
  background:hsla(320, 50%, 50%,0.2); 
}  
div.three { 
  background:hsla(320, 100%, 75%,0.4); 
}  
div.four { 
  background:hsla(202, 100%, 50%,0.6); 
}  
div.five { 
  background:hsla(202, 50%, 50%,0.8); 
}  
div.six { 
  background:hsla(202, 100%, 75%,1);  
}  
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
</body>
</html>


相關文章