DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> 關於HTML >> HTML5 rgba與opacity的屬性 兼容ie6/7/8/9各浏覽器
HTML5 rgba與opacity的屬性 兼容ie6/7/8/9各浏覽器
編輯:關於HTML     

在css3之前,在樣式中指定的顏色值只能為RGB顏色值,並且只能通過opacity屬性來設置元素的透明度。CSS3中增加了3種顏色值-RGBA顏色值,HSL顏色值及HSLA顏色值,並且允許通過對RGBA顏色值和HSLA顏色值設定alpha通道的方法來更加容易地實現將半透明文字與圖像互相重疊的效果。

 

alpha通道與opacity屬性的區別

opacity屬性時css中專門用來指定透明度的一個屬性,取值范圍也在0-1之間,0表示完全透明,1表示不透明。使用alpha通道對元素設定透明度時,可以單獨針對元素的背景色和文字顏色等來指定透明度,而opacity屬性只能指定整個元素的透明度。

但alpha通道與opacity屬性並不兼容ie9以下的版本,以下為本人利用濾鏡等方式解決了此問題,兼容各個版本。

 

RGBA方法(兼容各個版本)

 

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>RGBa 與 opacity 效果的區別</title>
    <!--以下為通用浏覽器的寫法-->
    <style type="text/css">
       .main{ background:#000; width:300px; height:300px; }
       .main-1{ background:rgb(255,255,255); background:rgba(255,255,255,0.2);width:300px; height:50px; }
    </style>
    
    <!--以下為針對ie浏覽器的寫法-->
    <!--[if IE]>
    <style type="text/css">
       .main-1{
            background: transparent;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#20ffffff', endColorstr='#20ffffff');
            zoom: 1;
            }
    </style>
    <![endif]-->
   
    
</head>
<body>
   <div class="main"><div class="main-1"></div></div>
</body>
</html>


 

opacity方法(兼容各個版本)

 

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>RGBa 與 opacity 效果的區別</title>
    <style type="text/css">
       .main{ background:#000; width:300px; height:300px; }
       .main-1{ background:#fff; filter:alpha(opacity=20);opacity:0.2;width:300px; height:50px; }
    </style>
    
</head>
<body>
   <div class="main"><div class="main-1"></div></div>
</body>
</html>
 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved