CSS3中的Opacity多瀏覽器透明度兼容性問(wèn)題
我要評(píng)論用來(lái)設(shè)定元素透明度的 Opacity 是CSS 3里的一個(gè)屬性。當(dāng)然現(xiàn)在還只有少部分瀏覽器支持。不過(guò)各個(gè)瀏覽器都有自己的私有屬性來(lái)支持,其中包括老版本的Mozilla和Safari：
IE: filter:alpha(opacity)
Mozilla: -moz-opacity
Safari: -khtml-opacity
很不幸的是，你沒(méi)看見(jiàn)Opera，老版本的Opera并沒(méi)有什么私有屬性可以代替opacity。（新版Opera已經(jīng)支持opacity）
所以以前用CSS設(shè)定一個(gè)元素半透明的話，可能會(huì)這樣寫(xiě):
- .opacity{
- filter:alpha(opacity=50); /* IE */
- -moz-opacity:0.5; /* 老版Mozilla */
- -khtml-opacity:0.5; /* 老版Safari */
- opacity: 0.5; /* 支持opacity的瀏覽器*/
- }
用javascript來(lái)設(shè)定一個(gè)元素為半透明:
- object.filter = "alpha(opacity=" + opacity + ")"; /* IE */
- object.MozOpacity = (opacity / 100); /* 老版Mozilla */
- object.KhtmlOpacity = (opacity / 100); /* 老版Safari */
- object.opacity = (opacity / 100); /* 支持opacity的瀏覽器*/
下面給大家介紹css透明度的設(shè)置 （兼容所有瀏覽器）
一句話搞定透明背景！
- .transparent_class {
- filter:alpha(opacity=50);
- -moz-opacity:0.5;
- -khtml-opacity: 0.5;
- opacity: 0.5;
- }
UPDATE: I wanted to pull this post out of the archives and update it a bit because it there seems to be a good amount of interest in this subject.
Here is what each of those CSS properties is for:
opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.
filter:alpha(opacity=50); This one you need for IE.
-moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.
-khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit .
相關(guān)文章
通過(guò)css3動(dòng)畫(huà)和opacity透明度實(shí)現(xiàn)呼吸燈效果
這篇文章主要介紹了通過(guò)css3動(dòng)畫(huà)和opacity透明度實(shí)現(xiàn)呼吸燈效果,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編2019-08-09
詳解css透明度之rgba和opacity的區(qū)別及兼容
對(duì)于設(shè)置透明度，我們有兩個(gè)可以選的css3屬性：rgba 和 opacity。這篇文章主要介紹了詳解css透明度之rgba和opacity的區(qū)別及兼容，感興趣的可以一起跟隨小編來(lái)了解一下2019-01-10
CSS中 opacity的設(shè)置影響了index（層數(shù)）的改變的問(wèn)題總結(jié)（推薦）
這篇文章主要介紹了CSS中 opacity的設(shè)置影響了index（層數(shù)）的改變的問(wèn)題，通過(guò)各種情況出現(xiàn)的問(wèn)題進(jìn)行了總結(jié)并附上了代碼，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣2017-08-17
css中使用rgba和opacity設(shè)置透明度的區(qū)別（附圖）
這篇文章主要介紹了css中使用rgba和opacity設(shè)置透明度的兩種方法,通過(guò)實(shí)例演示解釋了兩者之間的差別,需要的朋友可以參考下2017-08-14詳解CSS透明opacity和IE各版本透明度濾鏡filter的最準(zhǔn)確用法
CSS3的透明度屬性opacity想必大家都已經(jīng)用的無(wú)處不在了。而對(duì)于不支持CSS3的瀏覽器如何進(jìn)行透明處理，保持瀏覽器效果的一致,本篇文章主要介紹了詳解CSS透明opacity和IE各版2016-12-20解決CSS3的opacity屬性帶來(lái)的層疊順序問(wèn)題
這篇文章主要介紹了解決CSS3的opacity屬性帶來(lái)的層疊順序問(wèn)題的方法,主要針對(duì)opacity的屬性值小于1的層會(huì)覆蓋在其他層之上的問(wèn)題,需要的朋友可以參考下2016-05-09詳解CSS3的opacity屬性設(shè)置透明效果的用法
這篇文章主要介紹了詳解CSS3的opacity屬性設(shè)置透明效果的用法,同時(shí)還講到了opacity透明度帶有的繼承性影響子集元素的問(wèn)題,值得初學(xué)者注意,需要的朋友可以參考下2016-05-09- 這篇文章主要介紹了CSS3中的opacity屬性使用教程,主要用來(lái)設(shè)置透明效果,需要的朋友可以參考下2015-08-19
- CSS 圖像透明度opacity想必大家并不陌生吧，使其可以讓圖片或者頁(yè)面擁有透明效果，下面為大家講解下CSS opacity的使用及其兼容性，感興趣的朋友可以參考下2013-09-08
CSS Alpha透明相關(guān)知識(shí)學(xué)習(xí)-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
圖片的透明效果是網(wǎng)頁(yè)中需要用到的一種特殊形式，雖然不是非常的常用，但是遇到這樣的需求往往有點(diǎn)措手不及，在webjx.com的文章中雖然有這方面的CSS實(shí)例，但還沒(méi)有系統(tǒng)2008-10-17
