欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

什么是CSS3 HSLA色彩模式？HSLA模擬漸變色條

  發(fā)布時間：2016-04-26 15:26:42   作者：佚名   我要評論
這篇文章主要以模擬漸變色條實例，針對CSS3 HSLA色彩模式進行介紹，使用HSLA色彩模式，可以設(shè)計不同的透明效果，感興趣的小伙伴們可以參考一下

HSLA色彩模式是HSL色彩模式的擴展，在色彩，飽和度，亮度三要素的基礎(chǔ)上增加了不透明度參數(shù)。使用HSLA色彩模式，可以設(shè)計不同的透明效果。
語法：

hsla（<length>，<percentage>，<percentage>，<opacity>）

表示不透明度，取值在0和1之間。

實例：模擬漸變色條

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>HSLA Color</title>  
  6. <style type="text/css">  
  7. div {height:20px;}   
  8. div:nth-child(1) { background:hsla(120,50%,50%,0.1); }   
  9. div:nth-child(2) { background:hsla(120,50%,50%,0.2); }   
  10. div:nth-child(3) { background:hsla(120,50%,50%,0.3); }   
  11. div:nth-child(4) { background:hsla(120,50%,50%,0.4); }   
  12. div:nth-child(5) { background:hsla(120,50%,50%,0.5); }   
  13. div:nth-child(6) { background:hsla(120,50%,50%,0.6); }   
  14. div:nth-child(7) { background:hsla(120,50%,50%,0.7); }   
  15. div:nth-child(8) { background:hsla(120,50%,50%,0.8); }   
  16. div:nth-child(9) { background:hsla(120,50%,50%,0.9); }   
  17. div:nth-child(10) { background:hsla(120,50%,50%,1); }   
  18. </style>  
  19. </head>  
  20.   
  21. <body>  
  22. <div></div>  
  23. <div></div>  
  24. <div></div>  
  25. <div></div>  
  26. <div></div>  
  27. <div></div>  
  28. <div></div>  
  29. <div></div>  
  30. <div></div>  
  31. <div></div>  
  32. </body>  
  33. </html>  

演示效果：

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。

相關(guān)文章

  • CSS3常用的幾種顏色漸變模式總結(jié)

    現(xiàn)在html5 css3已經(jīng)越來越流行，用CSS3實現(xiàn)DIV漸變已經(jīng)不是什么難事了，這篇文章給大家整理了現(xiàn)在常用的三種顏色漸變模式，包括線性漸變、徑向漸變和重復(fù)的線性漸變，文中
    2016-11-18

  • 利用CSS3把圖片變成灰色模式的實例代碼

    這篇文章給大家分享了如何利用CSS3把圖片變成灰色模式的效果，實現(xiàn)起來很簡單，有需要的朋友們可以參考借鑒。
    2016-09-06

  • CSS3 RGBA色彩模式使用實例講解

    這篇文章主要以設(shè)計帶有陰影邊框的表單為例，為大家介紹了CSS3 RGBA色彩模式使用方法，感興趣的小伙伴們可以參考一下
    2016-04-26

  • CSS3色彩模式有哪些？CSS3 HSL色彩模式的定義

    CSS3色彩模式有哪些？這篇文章主要介紹了CSS3色彩模式是什么？告訴大家HSL色彩模式的定義、語法，感興趣的小伙伴們可以參考一下
    2016-04-26

  • 使用CSS實現(xiàn)黑暗模式和高亮模式的切換功能

    這兩個概念是來源于 macOS系統(tǒng) ，該系統(tǒng)為用戶提供兩個主題皮膚，即 高亮 和 暗色 系的皮膚。接下來通過本文給大家分享使用CSS實現(xiàn)黑暗模式和高亮模式的切換功能，感興趣的
    2019-06-14

最新評論