好程序員web前端分享CSS學習：HSLA顏色模式

時間  2019-12-04
標籤 程序員 web 前端 分享 css 學習 hsla 顏色 模式 欄目 快樂工作 简体版
原文   原文鏈接

好程序員web前端分享CSS學習：HSLA顏色模式css

1、理論：
1.HSLA顏色模式
a.HSLA在HSL基礎上增長了不透明度，值越大透明度越低
b.HSLA顏色模式的瀏覽器兼容性和HSL同樣，只有較新版本的主流瀏覽器才支持
2.RGBA和HSLA顏色模式兩者能夠徹底相互替換
3.RGBA/HSLA的IE兼容方案
a.在IE8如下版本，通常在前面設置一個非透明色，在其後緊跟一個RGBA/HSLA顏色模式
b.將透明的PNG圖片平鋪作爲背景圖片，適用於ie7-8
c.使用Gradient濾鏡能夠指定半透明顏色，將起止色設置爲同一種顏色便可避免產生漸變

2、實踐：
1.html

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <style type="text/css">  
  7.         .row{  
  8.             overflow: hidden;  
  9.         }  
  10.         .row div{  
  11.             width: 80px;  
  12.             height: 80px;  
  13.             line-height: 80px;  
  14.             text-align: center;  
  15.             float:left;  
  16.         }  
  17.         .row:nth-of-type(1) div {  
  18.             background: hsla(183,50%,50%,1);  
  19.         }  
  20.         .row:nth-of-type(2) div {  
  21.             background: hsla(133,50%,50%,.8);  
  22.         }  
  23.         .row:nth-of-type(3) div {  
  24.             background:  hsla(133,50%,50%,.6);  
  25.         }  
  26.         .row:nth-of-type(4) div{  
  27.             background: hsla(133,50%,50%,.4);  
  28.         }  
  29.         .row div:nth-child(1){  
  30.             background: hsla(133,50%,50%,.2);  
  31.         }  
  32.         .row div:nth-child(2){  
  33.             background: hsla(133,50%,50%,.1);  
  34.         }  
  35.         .row div:nth-child(3){  
  36.             background: hsla(133,50%,50%,.2);  
  37.         }  
  38.         .row div:nth-child(4){  
  39.             background: hsla(133,50%,50%,.3);  
  40.         }  
  41.         .row div:nth-child(5){  
  42.             background: hsla(133,50%,50%,.4);  
  43.         }  
  44.         .row div:nth-child(6){  
  45.             background: hsla(133,50%,50%,.5);  
  46.         }  
  47.         .row div:nth-of-type(1) div {  
  48.             background: hsla(133,50%,50%,.6);  
  49.         }  
  50.     </style>  
  51. </head>  
  52. <body>  
  53. <div class="demo">  
  54.     <div class="row">  
  55.         <div>  
  56.             1  
  57.         </div>  
  58.         <div>  
  59.             0.8  
  60.         </div>  
  61.         <div>  
  62.             0.6  
  63.         </div>  
  64.         <div>  
  65.             0.4  
  66.         </div>  
  67.         <div>  
  68.             0.2  
  69.         </div>  
  70.     </div>  
  71.     <div class="row">  
  72.         <div>  
  73.             1  
  74.         </div>  
  75.         <div>  
  76.             0.8  
  77.         </div>  
  78.         <div>  
  79.             0.6  
  80.         </div>  
  81.         <div>  
  82.             0.4  
  83.         </div>  
  84.         <div>  
  85.             0.2  
  86.         </div>  
  87.     </div>  
  88.     <div class="row">  
  89.         <div>  
  90.             1  
  91.         </div>  
  92.         <div>  
  93.             0.8  
  94.         </div>  
  95.         <div>  
  96.             0.6  
  97.         </div>  
  98.         <div>  
  99.             0.4  
  100.         </div>  
  101.         <div>  
  102.             0.2  
  103.         </div>  
  104.     </div>  
  105.     <div class="row">  
  106.         <div>  
  107.             1  
  108.         </div>  
  109.         <div>  
  110.             0.8  
  111.         </div>  
  112.         <div>  
  113.             0.6  
  114.         </div>  
  115.         <div>  
  116.             0.4  
  117.         </div>  
  118.         <div>  
  119.             0.2  
  120.         </div>  
  121.     </div>  
  122.     <div class="row">  
  123.         <div>  
  124.             1  
  125.         </div>  
  126.         <div>  
  127.             0.8  
  128.         </div>  
  129.         <div>  
  130.             0.6  
  131.         </div>  
  132.         <div>  
  133.             0.4  
  134.         </div>  
  135.         <div>  
  136.             0.2  
  137.         </div>  
  138.     </div>  
  139. </div>  
  140.   
  141. </body>  

</html>  前端

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程