opacity透明度濾鏡的IE相容解決方法
這次帶給大家opacity透明度濾鏡的IE相容解決方法，使用opacity透明度濾鏡的注意事項有哪些，以下就是實戰案例，一起來看一下。
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 產生一個比較立體的陰影
⑬、Wave 讓HTML元件產生水平或是垂直方向上的波浪變形
⑭、XRay 像照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>
對應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内核的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);
}使用中，我們可以根據要適配的瀏覽器/版本，從上面選擇自己需要的程式碼行。如果要全面支援所有瀏覽器，至少需要有關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:
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first filter: alpha(opacity=50); // second
If you don't use this order, IE8 emulating IE7 doesn 't apply the opacity, although IE8 and IE7 native do.
我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
用transparent做出三角形以上是opacity透明度濾鏡的IE相容解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Internet Explorer 開啟 Edge：如何停止 MS Edge 重新導向
Apr 14, 2023 pm 06:13 PM
長期以來，InternetExplorer的失寵一直不是秘密，但隨著Windows11的到來，現實開始了。 Edge將來不再有時取代IE，它現在是微軟最新作業系統中的預設瀏覽器。目前，您仍然可以在Windows11中啟用InternetExplorer。但是，IE11（最新版本）已經有了一個正式的退役日期，即2022年6月15日，時間在流逝。考慮到這一點，您可能已經注意到InternetExplorer有時會打開Edge，而您可能不喜歡它。那為什麼會這樣呢？在
win11無法使用ie11瀏覽器怎麼辦？ (win11用不了ie瀏覽器)
Feb 10, 2024 am 10:30 AM
越來越多的用戶開始升級win11系統，由於每個用戶的使用習慣不同，還是有不少用戶在使用ie11瀏覽器，那麼win11系統用不了ie瀏覽器，該怎麼辦呢？ windows11還支援ie11嗎？下面就來看看解決方法。 win11無法使用ie11瀏覽器的解決方法1、先右鍵開始選單，選擇「命令提示字元（管理員）」開啟。 2.開啟之後，直接輸入“Netshwinsockreset”，回車確定。 3.確定之後再輸入「netshadvfirewallreset&rdqu
教你win10工作列設定透明度的方法
Jul 10, 2023 pm 12:37 PM
win10系統有許多比較新穎的功能，有小夥伴想要讓自己的win10系統更有個人化，因此想設定工作列透明度看起來更酷炫。那麼win10工作列如何設定透明度呢？下面小編就教大家win10工作列設定透明度的方法。具體的方法如下：1、開啟電腦，滑鼠移動到任務欄，然後滑鼠右鍵任務欄，在視窗找到「任務欄設定」並且點開。 2.點開「工作列設定」視窗後，找到「顏色」選項，點開，在「顏色」設定介面可以設定大家所喜歡的得任務列顏色，大家可以選擇Windows顏色也可以自訂顏色，選好顏色後找到下面的「透明效
CSS屬性實現透明度漸層效果的方法
Nov 18, 2023 pm 05:28 PM
CSS屬性實現透明度漸變效果的方法，需要具體程式碼範例在網頁設計中，透明度漸層效果可以為頁面增添一種柔和而美觀的過渡效果。透過CSS屬性的設置，我們可以輕鬆實現不同元素在透明度上的過渡效果。今天我們就來介紹一些常見的方法和具體的程式碼範例。使用opacity屬性Opacity屬性可以設定元素的透明度，取值範圍從0到1，0表示完全透明，1表示完全不透明。我們可以通
Win10開啟IE自動跳到Edge怎麼取消_IE瀏覽器頁面自動跳轉的解決方法
Mar 20, 2024 pm 09:21 PM
近期不少的win10用戶們在使用電腦瀏覽器的時候發現自己的ie瀏覽器總是自動的跳到edge瀏覽器，那麼win10打開ie自動跳轉edge怎麼關閉?。下面就讓本站來為用戶們來仔細的介紹一下win10打開ie自動跳轉edge關閉方法吧。 1.我們登入edge瀏覽器，點選右上角...，找下拉的設定選項。 2.我們進入設定後，在左側欄點選預設瀏覽器。 3.最後我們在相容性中，勾選不允許IE模式下重新載入網站，重啟ie瀏覽器即可。
一個時代的結束：Internet Explorer 11 已退役，這是你需要知道的
Apr 20, 2023 pm 06:52 PM
2022年6月15日是Microsoft結束對InternetExplorer11(IE11)的支援並關閉其舊版瀏覽器章節的日子。一段時間以來，該公司一直在提醒用戶注意這一生命週期結束日期，並呼籲他們計劃遷移到MicrosoftEdge。 Microsoft將IE11與Windows8.1捆綁在一起，作為Windows的現代預設網頁瀏覽器。儘管它從未達到Chrome的（目前）高度，但它是2014年使用量第二大的桌面瀏覽器，僅次於IE8。當然，隨著20
ie快捷方式無法刪除如何解決
Jan 29, 2024 pm 04:48 PM
ie捷徑無法刪除的解決方法：1、權限問題；2、捷徑損壞；3、軟體衝突；4、登錄問題；5、惡意軟體；6、系統問題；7、重新安裝IE；8、使用第三方工具；9、檢查捷徑的目標路徑；10、考慮其他因素；11、諮詢專業人士。詳細介紹：1、權限問題，右鍵點擊快捷方式，選擇“屬性”，在“安全性”選項卡中，確保有足夠的權限刪除該快捷方式，如果沒有，可以嘗試以管理員身份運行等等。
如何啟用IE的加速功能
Jan 30, 2024 am 08:48 AM
ie加速功能怎麼開？ ie打開網頁的速度太慢，我們可以在裡面開啟硬體加速模式。很多小夥伴反應說使用ie瀏覽器的時候，開啟網頁的速度特別的慢，這樣對我們瀏覽網頁也造成了一定影響。就想詢問小編有什麼解決辦法，這種情況是可以開啟ie瀏覽器的硬體加速模式，小編下面整理了ie開啟加速功能方法，感興趣的話一起往下看看！ ie開啟加速功能方法開啟IE安全瀏覽器，點選右上角齒輪狀的「設定」圖標，選擇「Internet選項」進入，如圖所示。 2、在Internet選項的視窗頭部的標籤導航中點擊“進階”，如圖所示。 3、
