1. 程式人生 > >好程式設計師web前端分享CSS學習:HSLA顏色模式

好程式設計師web前端分享CSS學習:HSLA顏色模式

好程式設計師web前端分享CSS學習:HSLA顏色模式

一、理論:
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濾鏡可以指定半透明顏色,將起止色設定為同一種顏色即可避免產生漸變

二、實踐:
1.

  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>  

<