首頁 > web前端 > css教學 > CSS透明opacity和IE各版本透明度濾鏡filter最準確的用法

CSS透明opacity和IE各版本透明度濾鏡filter最準確的用法

高洛峰
發布: 2017-02-25 14:43:50
原創
1740 人瀏覽過

CSS3的透明度屬性opacity想必大家都已經使用的無所不在了。而對於不支援CSS3的瀏覽器如何進行透明處理,保持瀏覽器效果的一致,本篇文章主要介紹了詳解CSS透明opacity和IE各版本透明度濾鏡filter的最準確用法,有興趣的可以了解一下。

CSS3的透明度屬性opacity想必大家都已經用的無所不在了。而對於不支援CSS3的瀏覽器如何進行透明處理,保持瀏覽器效果的一致,這個估計誰都會寫,但是涉及到filter的具體語法含義和各版本寫法的不同區別,很多人都搞不准確,我曾經問過許多群組裡的大牛,說的都不是很準確,網路上的說法就更五花八門了。今天呢,主要是重新溫習一下這個屬性,並實際測試來說明正確的寫法,和IE各版本的支持度和書寫區別。

首先,Opacity屬性用來設定一個元素的透明度,取值範圍是0~1之間,不可為負值。 opacity取值為1是完全不透明,取值為0是完全透明,視覺上看不見。關於瀏覽器對opacity屬性的兼容性請繼續往下看:

從Firefox3.5+不再支援私有屬性-moz-opacity了,在Mozilla 1.7 (Firefox 0.9)之前FF都是使用這個私有屬性的,Firefox 0.9-Firefox3同時支援-moz-opacity和opacity這兩個屬性,現在回想起剛入場場不久那時候,正好是Firefox升級到3.5之後,一些做好的頁面透明效果突然沒有了,如今已CSS3鋪天蓋地,概嘆時光荏苒啊。

IE9+才開始支援CSS3 opacity,而對IE6-IE8我們習慣使用filter濾鏡屬性來進行實作。 IE4-IE9都支援濾鏡寫法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).

IE8又引入了特殊的-ms-filter,IE認為這種寫法是對舊寫法的一次更正,比較符合規範,這個寫法的屬性值只是多了一對引號,效果同前。不過,這種寫法的壽命也不長,到IE10對filter與-ms-filter都已經不再支援。

Safari 1.2之前的版本,是基於khtml的瀏覽器內核,1.2版發布後,不再支援-khtml-opacity的寫法,-khtml-opacity也隨之成為歷史。

Konqueror從未支援過-khtml-opacity,從4.0版本開始已經支援opacity。

除IE外,目前主流瀏覽器 Opera 9.0+,Safari  1.2(WebKit 125) +,chrome等等都支援opacity這個透明度屬性。

IE 從4.0版開始,就提供了一些內建的多媒體濾鏡特效,具體的使用方法是:

語法:

filter : filter 

參數: 

filter :  要使用的濾鏡效果。多個濾鏡之間用空格隔開。

說明:

1、設定或擷取物件所套用的濾鏡效果。

2、要使用該屬性,物件必須具有height,width,position三個屬性中的一個。

3、濾鏡的機制是可擴充的。可以開發和使用第三方濾鏡。

4、此屬性在MAC平台上不可用。

5、對應的腳本特性為filter。

IE4.0以上版本,支援以下14種濾鏡:

①、Alpha     讓HTML元件呈現透明的漸進式效果

② 、Blur     讓HTML元件產生風吹模糊的效果

③、Chroma     讓影像中的某一顏色變成透明色

④、DropShadow     使HTML元件有一個下落式的陰影

⑤、FlipH     讓HTML元件水平翻轉

⑥、FlipV     讓HTML元件垂直翻轉

⑦、Glow #    模糊元件的光暈而產生光暈的效果產生光暈的效果

⑧、Gray     把一個彩色的圖片變成黑白色

#⑨、Invert     產生圖片的照片底片的效果

⑩、Light     在HTML

⑩、Light     在HTML

#⑪、Mask     利用另一個HTML元件在另一個元件上產生影像的遮罩

⑫、Shadow     產生一個比較立體的陰影

⑬、Wc    產生一個比較立體的陰影⑬、Wc  或是垂直方向上的波浪變形

⑭、XRay     產生HTML元件的輪廓,就像是照X光一樣

Alpha 濾鏡參數詳解###### ###①、Opacity     不透明的程度,百分比。    從0到100,0表是完全透明,100表示​​完全不透明。 ######②、FinishOpacity     這是一個同Opacity一起使用的選擇性的參數,當同時Opacity和FinishOpacity時,可以製作出透明漸進的效果,比較酷。    從0到100,0表是完全透明,100表示​​完全不透明。 ###

③、Style     當同時設定了Opacity和finishOpacity產生透明漸進時,它主要是用赤指定漸進的顯示形狀。    0:沒有漸進;1:直線漸進;2:圓形漸進;3:矩形輻射。

④、StartX     漸進開始的X 座標值   

⑤、StartY     漸進開始的Y 座標值   #o

# 結束值#⑦、FinishY     漸進結束的Y 座標值   

以下透過一個例子來測試filter和opacity的相容性:

Html程式碼

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=utf-8 />  
<title>JS Bin</title>  
</head>  
<body>  
  <p class="transparent_class">测试透明度</p>  
</body>  
</html>
登入後複製

#
.transparent_class {  
    /* Required for IE 5, 6, 7 */  
    /* ...or something to trigger hasLayout, like zoom: 1; */  
    width:300px;  
    height:300px;  
    line-height:300px;  
    text-align:center;  
    background:#000;  
    color:#fff;  
    /* older safari/Chrome browsers */  
    -webkit-opacity: 0.5;  
    /* Netscape and Older than Firefox 0.9 */  
    -moz-opacity: 0.5;  
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/  
    -khtml-opacity: 0.5;  
    /* IE9 + etc...modern browsers */  
    opacity: .5;  
    /* IE 4-9 */  
    filter:alpha(opacity=50);  
    /*This works in IE 8 & 9 too*/  
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
    /*IE4-IE9*/  
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  
}
登入後複製

Html程式碼

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first  
filter: alpha(opacity=50); // second
登入後複製

注意:測試不要忘了寫DOCTYPE,否則會偏離真實效果。

對應CSS程式碼:

rrreee

#使用中,我們可以根據要適應的瀏覽器/版本,從上面選擇自己需要的程式碼行。如果要全面支援所有瀏覽器,至少需要有關opacity或filter的前5句。需要聲明的是,如果你要同時使用filter和-ms-filter,請將-ms-filter寫在filter的前面。原文描述如下:

If you want opacity to also work in IE8′s emulating IE7 mode, the order should be:

rrreee

If you don't use this order, IE8 emulating IE7 doesn't apply the opacity, although IE8 and IE7 native do.

####以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援PHP中文網。 ######更多CSS透明opacity和IE各版本透明度濾鏡filter的最準確用法相關文章請關注PHP中文網! ###
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板