搜尋
首頁web前端css教學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程式碼

nbsp;html>  
  
  
<meta>  
<title>JS Bin</title>  
  
  
  <p>测试透明度</p>  
  
##注意:測試不要忘了測試寫DOCTYPE,否則會偏離真實效果。

對應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做出三角形

#CSS3的瀏覽器相容問題

HTML5+CSS3載入進度列與下載進度條實作

以上是opacity透明度濾鏡的IE相容解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
Internet Explorer 打开 Edge:如何停止 MS Edge 重定向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浏览器)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任务栏设置透明度的方法教你win10任务栏设置透明度的方法Jul 10, 2023 pm 12:37 PM

win10系统有许多比较新颖的功能,有小伙伴想要让自己的win10系统更加具有个性化,因此想设置任务栏透明度看起来更加酷炫些。那么win10任务栏如何设置透明度呢?下面小编就教下大家win10任务栏设置透明度的方法。具体的方法如下:1、打开电脑,鼠标移动到任务栏,然后鼠标右键任务栏,在窗口找到“任务栏设置”并且点开。2、点开“任务栏设置”窗口后,找到“颜色”选项,点开,在“颜色”设置界面可以设置大家所喜欢的得任务栏颜色,大家可以选择Windows颜色也可以自定义颜色,选好颜色后找到下面的“透明效

CSS属性实现透明度渐变效果的方法CSS属性实现透明度渐变效果的方法Nov 18, 2023 pm 05:28 PM

CSS属性实现透明度渐变效果的方法,需要具体代码示例在网页设计中,透明度渐变效果可以为页面增添一种柔和而美观的过渡效果。通过CSS属性的设置,我们可以轻松实现不同元素在透明度上的过渡效果。今天我们就来介绍一些常见的方法和具体的代码示例。使用opacity属性Opacity属性可以设置元素的透明度,取值范围从0到1,0表示完全透明,1表示完全不透明。我们可以通

PPT怎么设置图片透明度PPT怎么设置图片透明度Mar 20, 2024 pm 11:10 PM

我们平时在制作ppt的时候可以给图片穿插到里边,但是PPT怎么设置图片透明度这个问题对于一些刚学的小伙伴们还是不知道怎么实现,那么今天我就来教大家具体的操作步骤,具体步骤如下图。1.首先,在电脑上打开并且新建一个PPT文档,(如下图所示)。2.接下来,在上方工具栏中选择【插入】-【形状】,选择矩形并在空白画布上画出,(如下图红色圈出部分和红色箭头指向所示)。3.然后,在上方工具栏中选择【填充】,(如下图红色圈出部分和红色箭头指向所示)。4.接下来,在【填充】对话框中选择【更多设置】,(如下图红色

Win10打开IE自动跳转到Edge怎么取消_IE浏览器页面自动跳转的解决办法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 已退役,这是你需要知道的一个时代的结束:Internet Explorer 11 已退役,这是你需要知道的Apr 20, 2023 pm 06:52 PM

2022年6月15日是Microsoft结束对InternetExplorer11(IE11)的支持并关闭其旧版浏览器章节的日子。一段时间以来,该公司一直在提醒用户注意这一生命周期结束日期,并呼吁他们计划迁移到MicrosoftEdge。Microsoft将IE11与Windows8.1捆绑在一起,作为Windows的现代默认Web浏览器。尽管它从未达到Chrome的(当前)高度,但它是2014年使用量第二大的桌面浏览器,仅次于IE8。当然,随着20

醒图透明度在哪醒图透明度在哪Mar 20, 2023 am 11:47 AM

醒图透明度在“特效->调节参数”中,其设置图片透明度的具体方法是:1、打开醒图app;2、点击“导入”,选择“喜欢的图片”打开;3、在页面底部找到并点击“特效”,然后点击“调节参数”,点击“透明度”,滑动刻度线即可设置透明度。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能