前提:除IE外,目前主流瀏覽器 Opera 9.0+汁讼,Safari 1.2(WebKit 125) +玄货,chrome等等都支持opacity這個(gè)透明度屬性。
IE 從4.0版開(kāi)始瓤帚,就提供了一些內(nèi)置的多媒體濾鏡特效描姚,具體的使用方法是:
語(yǔ)法:
filter:filter
要使用的濾鏡效果,多個(gè)之間用空格分割
說(shuō)明:使用該屬性時(shí)戈次,必須具有height,width,position中的一個(gè)轩勘,在MAC平臺(tái)上不可用
支持以下14種濾鏡
Alpha 讓HTML元件呈現(xiàn)出透明的漸進(jìn)效果
Blur 讓HTML元件產(chǎn)生風(fēng)吹模糊的效果
Chroma 讓圖像中的某一顏色變成透明色
DropShadow 讓HTML元件有一個(gè)下落式的陰影
FlipH 讓HTML元件水平翻轉(zhuǎn)
FlipV 讓HTML元件垂直翻轉(zhuǎn)
Glow 在元件的周圍產(chǎn)生光暈而模糊的效果
Gray 把一個(gè)彩色的圖片變成黑白色
Invert 產(chǎn)生圖片的照片底片的效果
Light 在HTML元件上放置一個(gè)光影
Mask 利用另一個(gè)HTML元件在另一個(gè)元件上產(chǎn)生圖像的遮罩
Shadow 產(chǎn)生一個(gè)比較立體的陰影
Wave 讓HTML元件產(chǎn)生水平或是垂直方向上的波浪變形
XRay 產(chǎn)生HTML元件的輪廓,就像是照X光一樣
Alpha濾鏡參數(shù)詳解
Opacity 不透明的程度怯邪,百分比绊寻。 從0到100,0表是完全透明悬秉,100表示完全不透明澄步。
FinishOpacity 這是一個(gè)同Opacity一起使用的選擇性的參數(shù),當(dāng)同時(shí)Opacity和FinishOpacity時(shí)和泌,可以制作出透明漸進(jìn)的效果村缸,比較酷。 從0到100武氓,0表是完全透明梯皿,100表示完全不透明仇箱。
Style 當(dāng)同時(shí)設(shè)定了Opacity和finishOpacity產(chǎn)生透明漸進(jìn)時(shí),它主要是用赤指定漸進(jìn)的顯示形狀东羹。 0:沒(méi)有漸進(jìn)剂桥;1:直線漸進(jìn);2:圓形漸進(jìn)属提;3:矩形輻射渊额。
StartX 漸進(jìn)開(kāi)始的 X 坐標(biāo)值
StartY 漸進(jìn)開(kāi)始的 Y 坐標(biāo)值
FinishX 漸進(jìn)結(jié)束的 X 坐標(biāo)值
FinishY 漸進(jìn)結(jié)束的 Y 坐標(biāo)值
H5支持透明背景顏色
background-color:rgba(0,152,50,0.7)
表示百分之七十的不透明度,而且支持rgba寫(xiě)法垒拢,不支持16位
background-color:transparent;支持完全透明
#使用透明度+背景顏色或者背景圖片實(shí)現(xiàn)
background-color:rgb(0,152,50);
opacity:0.7
那么旬迹,問(wèn)題來(lái)了,IE6-IE8完全不支持 opacity,所以還得考慮一下 IE的濾鏡
使用alpha通道來(lái)設(shè)計(jì)不透明通道
filter:alpha(opacity=70)