欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

CSS透明opacity和IE各版本透明度濾鏡filter怎么用

這篇文章將為大家詳細(xì)講解有關(guān)CSS透明opacity和IE各版本透明度濾鏡filter怎么用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

在滕州等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作定制制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),網(wǎng)絡(luò)營銷推廣,成都外貿(mào)網(wǎng)站制作,滕州網(wǎng)站建設(shè)費(fèi)用合理。

CSS3的透明度屬性opacity想必大家都已經(jīng)用的無處不在了。而對于不支持CSS3的瀏覽器如何進(jìn)行透明處理，保持瀏覽器效果的一致，這個(gè)估計(jì)誰都會(huì)寫，但是涉及到filter的具體語法含義和各版本寫法的不同區(qū)別，很多人都搞不準(zhǔn)確，我曾經(jīng)問過許多群里的大牛，說的都不是很準(zhǔn)確，網(wǎng)上的說法就更五花八門了。今天呢，主要是重新溫習(xí)一下這個(gè)屬性，并實(shí)際測試來說明正確的寫法，和IE各版本的支持度和書寫區(qū)別。

首先，Opacity屬性用來設(shè)置一個(gè)元素的透明度，取值范圍是0~1之間，不可為負(fù)值。opacity取值為1是完全不透明，取值為0是完全透明，視覺上看不見。關(guān)于瀏覽器對opacity屬性的兼容性請繼續(xù)往下看：

從Firefox3.5+不再支持私有屬性-moz-opacity了，在Mozilla 1.7 (Firefox 0.9)之前FF都是使用這個(gè)私有屬性的，F(xiàn)irefox 0.9-Firefox3同時(shí)支持-moz-opacity和opacity這兩個(gè)屬性，現(xiàn)在回想起剛?cè)肼殘霾痪媚菚r(shí)候，正好是Firefox升級到3.5之后，一些做好的頁面透明效果突然沒有了，如今已經(jīng)CSS3鋪天蓋地，概嘆時(shí)光荏苒啊。

IE9+才開始支持CSS3 opacity，而對IE6-IE8我們習(xí)慣使用filter濾鏡屬性來進(jìn)行實(shí)現(xiàn)。IE4-IE9都支持濾鏡寫法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).

IE8又引入了特殊的-ms-filter，IE認(rèn)為這種寫法是對舊寫法的一次更正，更符合規(guī)范，這個(gè)寫法的屬性值只是多了一對引號，效果同前。不過，這種寫法的壽命也不長，到IE10對filter與-ms-filter都已經(jīng)不再支持。

Safari 1.2之前的版本，是基于khtml的瀏覽器內(nèi)核，1.2版發(fā)布后，不再支持-khtml-opacity的寫法，-khtml-opacity也隨之成為歷史。

Konqueror從未支持過-khtml-opacity，從4.0版本開始已經(jīng)支持opacity。

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

IE 從4.0版開始，就提供了一些內(nèi)置的多媒體濾鏡特效，具體的使用方法是：

語法：

filter : filter 

參數(shù)： 

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

說明：

1、設(shè)置或檢索對象所應(yīng)用的濾鏡效果。

2、要使用該屬性，對象必須具有height，width，position三個(gè)屬性中的一個(gè)。

3、濾鏡的機(jī)制是可擴(kuò)展的。可以開發(fā)和使用第三方濾鏡。

4、該屬性在MAC平臺上不可用。

5、對應(yīng)的腳本特性為filter。

IE4.0以上版本，支持以下14種濾鏡：

①、Alpha     讓HTML元件呈現(xiàn)出透明的漸進(jìn)效果

②、Blur     讓HTML元件產(chǎn)生風(fēng)吹模糊的效果

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

④、DropShadow     讓HTML元件有一個(gè)下落式的陰影

⑤、FlipH     讓HTML元件水平翻轉(zhuǎn)

⑥、FlipV     讓HTML元件垂直翻轉(zhuǎn)

⑦、Glow     在元件的周圍產(chǎn)生光暈而模糊的效果

⑧、Gray     把一個(gè)彩色的圖片變成黑白色

⑨、Invert     產(chǎn)生圖片的照片底片的效果

⑩、Light     在HTML元件上放置一個(gè)光影

?、Mask     利用另一個(gè)HTML元件在另一個(gè)元件上產(chǎn)生圖像的遮罩

?、Shadow     產(chǎn)生一個(gè)比較立體的陰影

?、Wave     讓HTML元件產(chǎn)生水平或是垂直方向上的波浪變形

?、XRay     產(chǎn)生HTML元件的輪廓，就像是照X光一樣

Alpha 濾鏡參數(shù)詳解

①、Opacity     不透明的程度，百分比。    從0到100，0表是完全透明，100表示完全不透明。

②、FinishOpacity     這是一個(gè)同Opacity一起使用的選擇性的參數(shù)，當(dāng)同時(shí)Opacity和FinishOpacity時(shí)，可以制作出透明漸進(jìn)的效果，比較酷。    從0到100，0表是完全透明，100表示完全不透明。

③、Style     當(dāng)同時(shí)設(shè)定了Opacity和finishOpacity產(chǎn)生透明漸進(jìn)時(shí)，它主要是用赤指定漸進(jìn)的顯示形狀。    0：沒有漸進(jìn)；1：直線漸進(jìn)；2：圓形漸進(jìn)；3：矩形輻射。

④、StartX     漸進(jìn)開始的 X 坐標(biāo)值   

⑤、StartY     漸進(jìn)開始的 Y 坐標(biāo)值   

⑥、FinishX     漸進(jìn)結(jié)束的 X 坐標(biāo)值   

⑦、FinishY     漸進(jìn)結(jié)束的 Y 坐標(biāo)值   

下面通過一個(gè)例子來測試filter和opacity的兼容性：

Html代碼

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=utf-8 />  
<title>JS Bin</title>  
</head>  
<body>  
  <div class="transparent_class">測試透明度</div>  
</body>  
</html>

注意：測試不要忘了寫DOCTYPE，否則會(huì)偏離真實(shí)效果。

對應(yīng)CSS代碼：

.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內(nèi)核的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);  
}

使用中，我們可以根據(jù)要適配的瀏覽器/版本，從上面選擇自己需要的代碼行。如果要全面支持所有瀏覽器，至少需要有關(guān)opacity或filter的前5句。需要聲明的是，如果你要同時(shí)使用filter和-ms-filter，請將-ms-filter寫在filter的前面。原文描述如下：

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

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

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

關(guān)于“CSS透明opacity和IE各版本透明度濾鏡filter怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

本文標(biāo)題：CSS透明opacity和IE各版本透明度濾鏡filter怎么用
轉(zhuǎn)載注明：http://chinadenli.net/article20/gehgco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈、虛擬主機(jī)、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站