css中filter:alpha透明度使用小結(jié)兼容IE、火狐
發(fā)布時(shí)間：2014-03-27 17:18:33 作者：佚名 
我要評(píng)論
我要評(píng)論使用Alpha可以設(shè)置透明度，F(xiàn)ILTER:alpha在IE下是沒有問題的，要支持firefox就需要使用-moz-opacity，下面有個(gè)不錯(cuò)的示例，大家可以參考下
Alpha，設(shè)置透明度。
用法：
FILTER:alpha(opacity=80);/* 設(shè)置不透明度為80 */
filter:Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
Opacity：透明度級(jí)別，范圍是0-100，0代表完全透明，100代表完全不透明。
FinishOpacity：設(shè)置漸變的透明效果時(shí)，用來指定結(jié)束時(shí)的透明度，范圍也是0 到 100。
Style：設(shè)置漸變透明的樣式，值為0代表統(tǒng)一形狀、1代表線形、2代表放射狀、3代表長方形。
StartX和StartY：代表漸變透明效果的開始X和Y坐標(biāo)。
FinishX和FinishY：代表漸變透明效果結(jié)束X和Y 的坐標(biāo)。
對(duì)于IE上述方法是沒有問題的。若要支持firefox請(qǐng)參照下面：
程序代碼
filter:alpha(opacity=80); /* IE */
-moz-opacity:0.8; /* Moz + FF */
opacity: 0.8; /* 支持CSS3的瀏覽器（FF 1.5也支持）*/
簡單解釋，IE使用私有屬性filter:alpha(opacity)，Moz Family使用私有屬性-moz-opacity，而標(biāo)準(zhǔn)的屬性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的數(shù)值是透明度，使用百分比或者小數(shù)（alpha(opacity)）使用大于0小于100的數(shù)值，其實(shí)也是百分比）。
用法：
復(fù)制代碼
代碼如下:FILTER:alpha(opacity=80);/* 設(shè)置不透明度為80 */
filter:Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
Opacity：透明度級(jí)別，范圍是0-100，0代表完全透明，100代表完全不透明。
FinishOpacity：設(shè)置漸變的透明效果時(shí)，用來指定結(jié)束時(shí)的透明度，范圍也是0 到 100。
Style：設(shè)置漸變透明的樣式，值為0代表統(tǒng)一形狀、1代表線形、2代表放射狀、3代表長方形。
StartX和StartY：代表漸變透明效果的開始X和Y坐標(biāo)。
FinishX和FinishY：代表漸變透明效果結(jié)束X和Y 的坐標(biāo)。
對(duì)于IE上述方法是沒有問題的。若要支持firefox請(qǐng)參照下面：
程序代碼
復(fù)制代碼
代碼如下:filter:alpha(opacity=80); /* IE */
-moz-opacity:0.8; /* Moz + FF */
opacity: 0.8; /* 支持CSS3的瀏覽器（FF 1.5也支持）*/
簡單解釋，IE使用私有屬性filter:alpha(opacity)，Moz Family使用私有屬性-moz-opacity，而標(biāo)準(zhǔn)的屬性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的數(shù)值是透明度，使用百分比或者小數(shù)（alpha(opacity)）使用大于0小于100的數(shù)值，其實(shí)也是百分比）。
相關(guān)文章
Filtering Blocks JS+CSS實(shí)現(xiàn)的的購物產(chǎn)品列表
Filtering Blocks JS+CSS美化的購物產(chǎn)品列表，響應(yīng)鼠標(biāo)變色，一眼能看出，這種寫法是來自一款國外的風(fēng)格，具體樣式請(qǐng)看截圖，大家如有興趣，可下載參考。2010-04-29- 前些天在做一個(gè)項(xiàng)目的時(shí)候，用到了陰影，陰影是個(gè)方向都有的，今天看到bricss說到filter:drop-shadow頓時(shí)豁然開朗，現(xiàn)整理了，需要的朋友可以參考下2012-12-12
CSS3 濾鏡 webkit-filter詳細(xì)介紹及使用方法
CSS3 開始也有濾鏡（不是 IE 的那種濾鏡），這些濾鏡效果最初是用于 SVG 的，W3C 將其引入到 CSS3 中，然后制定了 CSS Filter Effects 1.0 的規(guī)范，Webkit 率先支持了它,需2012-12-27css3背景圖片透明疊加屬性cross-fade簡介及用法實(shí)例
據(jù)說iOS6系統(tǒng)(iPhone5)增加了兩個(gè)CSS3屬性，一個(gè)是CSS3 filters – CSS3濾鏡另外一個(gè)是CSS3 Cross-fade – CSS3交叉淡入淡出,接下來為您介紹cross-fade屬性，感興趣的朋友2013-01-08使用Filters濾鏡彌補(bǔ)CSS3的跨瀏覽器問題以及兼容低版本IE
跨瀏覽器兼容性是網(wǎng)頁制作永恒的難題,所以在未來一段時(shí)間里，樣式表里的-moz-，-webkit-，(-ms-,-o-)等等前綴將長期存在,除了考慮各家瀏覽器之間的兼容性外，我們還有必要2013-01-23CSS中filter濾鏡的學(xué)習(xí)筆記(靜態(tài)濾鏡及動(dòng)態(tài)濾鏡)
本節(jié)為大家介紹了CSS中filter濾鏡，包括靜態(tài)濾鏡及動(dòng)態(tài)濾鏡的使用方法，不了解的朋友可以參考下2014-08-08css+filter實(shí)現(xiàn)簡單的圖片透明效果
本文給大家介紹的是CSS結(jié)合filter實(shí)現(xiàn)簡單的圖片透明效果的實(shí)例，主要使用filter的功能對(duì)圖片元素進(jìn)行透明度控制,需要的朋友可以參考下2015-01-13
