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元件上放置一个光影
⑪、Mask 利用另一个HTML元件在另一个元件上产生图像的遮罩
⑫、Shadow 产生一个比较立体的阴影
⑬、Wave 让HTML元件产生水平或是垂直方向上的波浪变形
⑭、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 坐标值
⑥、FinishX 渐进结束的 X 坐标值
⑦、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>
注意：测试不要忘了写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中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci opacity透明度滤镜的IE兼容解决方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1664
14
1423
52
1317
25
1268
29
1246
24
Internet Explorer membuka Edge: Bagaimana untuk menghentikan pengalihan MS Edge
Apr 14, 2023 pm 06:13 PM
Bukan rahsia lagi bahawa Internet Explorer telah lama tidak disukai, tetapi dengan ketibaan Windows 11, realiti muncul. Daripada kadangkala menggantikan IE pada masa hadapan, Edge kini menjadi penyemak imbas lalai dalam sistem pengendalian terkini Microsoft. Buat masa ini, anda masih boleh mendayakan Internet Explorer dalam Windows 11. Walau bagaimanapun, IE11 (versi terkini) sudah mempunyai tarikh persaraan rasmi, iaitu 15 Jun 2022, dan jam semakin berdetik. Dengan mengambil kira perkara ini, anda mungkin perasan bahawa Internet Explorer kadangkala membuka Edge, dan anda mungkin tidak menyukainya. Jadi mengapa ini berlaku? wujud
Apakah yang perlu saya lakukan jika win11 tidak boleh menggunakan pelayar ie11? (win11 tidak boleh menggunakan pelayar IE)
Feb 10, 2024 am 10:30 AM
Semakin ramai pengguna mula menaik taraf sistem win11 Memandangkan setiap pengguna mempunyai tabiat penggunaan yang berbeza, ramai pengguna masih menggunakan pelayar ie11 Jadi apa yang perlu saya lakukan jika sistem win11 tidak boleh menggunakan pelayar ie. Adakah windows11 masih menyokong ie11? Mari kita lihat penyelesaiannya. Penyelesaian kepada masalah yang win11 tidak boleh menggunakan pelayar ie11 1. Pertama, klik kanan menu mula dan pilih "Command Prompt (Administrator)" untuk membukanya. 2. Selepas dibuka, terus masukkan "Netshwinsockreset" dan tekan Enter untuk mengesahkan. 3. Selepas pengesahan, masukkan "netshadvfirewallreset&rdqu
Ajar anda cara menetapkan ketelusan bar tugas win10
Jul 10, 2023 pm 12:37 PM
Sistem win10 mempunyai banyak ciri yang agak baharu Sesetengah rakan ingin menjadikan sistem win10 mereka lebih diperibadikan, jadi mereka mahu menetapkan ketelusan bar tugas agar kelihatan lebih sejuk. Jadi bagaimana untuk menetapkan ketelusan bar tugas win10? Editor di bawah akan mengajar anda cara menetapkan ketelusan bar tugas win10. Kaedah khusus adalah seperti berikut: 1. Hidupkan komputer, gerakkan tetikus ke bar tugas, kemudian klik kanan bar tugas, cari "Tetapan Bar Tugas" dalam tetingkap dan klik padanya. 2. Selepas mengklik pada tetingkap "Taskbar Settings", cari pilihan "Color" dan klik padanya Dalam antara muka tetapan "Color", anda boleh menetapkan warna bar tugas yang anda suka Anda boleh memilih warna Windows atau menyesuaikan warna . Pilih Selepas memilih warna, cari "Kesan Ketelusan" di bawah.
Bagaimana untuk mencapai kesan kecerunan ketelusan menggunakan sifat CSS
Nov 18, 2023 pm 05:28 PM
Kaedah melaksanakan kesan kecerunan ketelusan menggunakan sifat CSS memerlukan contoh kod khusus Dalam reka bentuk web, kesan kecerunan ketelusan boleh menambah kesan peralihan yang lembut dan cantik pada halaman. Melalui penetapan sifat CSS, kita boleh mencapai kesan peralihan dengan mudah pada ketelusan elemen yang berbeza. Hari ini kami akan memperkenalkan beberapa kaedah biasa dan contoh kod khusus. Gunakan atribut kelegapan Atribut Kelegapan boleh menetapkan ketelusan elemen Nilai berjulat dari 0 hingga 1. 0 bermaksud telus sepenuhnya dan 1 bermaksud legap sepenuhnya. kita boleh lulus
Penghujung era: Internet Explorer 11 telah bersara, inilah perkara yang perlu anda ketahui
Apr 20, 2023 pm 06:52 PM
15 Jun 2022 ialah hari apabila Microsoft menamatkan sokongan untuk Internet Explorer 11 (IE11) dan menutup bab penyemak imbas warisannya. Syarikat itu telah mengingatkan pengguna tentang tarikh akhir hayat ini untuk beberapa waktu dan menyeru mereka untuk merancang perpindahan ke Microsoft Edge. Microsoft menggabungkan IE11 dengan Windows 8.1 sebagai pelayar web lalai moden untuk Windows. Walaupun ia tidak pernah mencapai ketinggian (semasa) Chrome, ia merupakan penyemak imbas desktop kedua paling banyak digunakan pada tahun 2014, di belakang IE8. Sudah tentu, dengan 20
Bagaimana untuk membatalkan lompat automatik ke Edge apabila membuka IE dalam Win10_Solution ke lompat automatik halaman pelayar IE
Mar 20, 2024 pm 09:21 PM
Baru-baru ini, ramai pengguna win10 mendapati bahawa pelayar IE mereka sentiasa melompat ke pelayar tepi secara automatik apabila menggunakan pelayar komputer Jadi bagaimana untuk mematikan lompat ke tepi automatik apabila membuka IE dalam win10? Biarkan tapak ini dengan teliti memperkenalkan kepada pengguna cara melompat ke tepi dan menutup secara automatik apabila membuka IE dalam win10. 1. Kami log masuk ke pelayar tepi, klik... di penjuru kanan sebelah atas, dan cari pilihan tetapan lungsur turun. 2. Selepas kami memasukkan tetapan, klik Penyemak Imbas Lalai di lajur kiri. 3. Akhir sekali, dalam keserasian, kami menandakan kotak untuk tidak membenarkan tapak web dimuat semula dalam mod IE dan mulakan semula pelayar IE.
Vue dan Canvas: Cara melaraskan mod ketelusan dan campuran imej
Jul 17, 2023 am 08:54 AM
Vue dan Canvas: Cara melaraskan mod ketelusan dan gabungan imej Dalam pembangunan web, kita selalunya perlu memproses imej, termasuk melaraskan mod ketelusan dan gabungan imej. Vue dan Canvas ialah dua teknologi yang biasa digunakan yang berfungsi dengan baik bersama untuk mencapai fungsi ini. Artikel ini akan memperkenalkan cara menggunakan Vue dan Canvas untuk melaraskan mod ketelusan dan gabungan imej serta memberikan contoh kod yang sepadan. Pelarasan ketelusan merujuk kepada menukar keterlihatan imej. Dalam Vue, anda boleh mengikat
Bagaimana untuk mendayakan fungsi pecutan IE
Jan 30, 2024 am 08:48 AM
Bagaimana untuk mendayakan fungsi pecutan IE? IE terlalu lambat untuk membuka halaman web, kami boleh mendayakan mod pecutan perkakasan di dalamnya. Ramai rakan melaporkan bahawa apabila menggunakan pelayar IE, kelajuan membuka halaman web adalah sangat perlahan, yang juga mempunyai kesan tertentu pada penyemakan imbas web kami. Saya hanya ingin bertanya kepada editor jika terdapat sebarang penyelesaian Dalam kes ini, anda boleh menghidupkan mod pecutan perkakasan pelayar IE. lihat di bawah! Untuk mendayakan fungsi pecutan dalam IE, buka pelayar selamat IE, klik ikon "Tetapan" berbentuk gear di penjuru kanan sebelah atas, dan pilih "Pilihan Internet" untuk masuk, seperti yang ditunjukkan dalam rajah. 2. Klik "Lanjutan" dalam navigasi tab di kepala tetingkap Internet Options, seperti yang ditunjukkan dalam rajah. 3.
