前提:除IE外,目前主流瀏覽器 Opera 9.0+,Safari 1.2(WebKit 125) +,chrome等等都支持opacity這個透明度屬性。
IE 從4.0版開始,就提供了一些內置的多媒體濾鏡特效,具體的使用方法是:
語法:
filter:filter
要使用的濾鏡效果,多個之間用空格分割
說明:使用該屬性時,必須具有height,width,position中的一個,在MAC平臺上不可用
支持以下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 坐標值
H5支持透明背景顏色
background-color:rgba(0,152,50,0.7)
表示百分之七十的不透明度,而且支持rgba寫法,不支持16位
background-color:transparent;支持完全透明
#使用透明度+背景顏色或者背景圖片實現
background-color:rgb(0,152,50);
opacity:0.7
那么,問題來了,IE6-IE8完全不支持 opacity,所以還得考慮一下 IE的濾鏡
使用alpha通道來設計不透明通道
filter:alpha(opacity=70)