css濾鏡兼容瀏覽器測試實例

2024-07-11 08:28:59

字體：大中小

供稿：網(wǎng)友

CSS代碼

復(fù)制代碼

代碼如下:
.test{
background:#000;
color:white;
width:200px;
position:absolute;
left:10px;
top:10px;
filter: Alpha(opacity=10);
-moz-opacity:.1;
opacity:0.1;
}

這里關(guān)鍵的是
CSS代碼

復(fù)制代碼

代碼如下:
filter: Alpha(opacity=10);
-moz-opacity:.1;
opacity:0.1;

這三句,第一句是ie 支持.第二三句是firefox支持的,但是版本不一樣就有兩種了,所以用時候把三句都加上就行了
用于定制圖片的顯示效果
1）濾鏡的有效HTML標(biāo)記：

復(fù)制代碼

代碼如下:
BODY
BUTTON
DIV
IMG
INPUT
MARQUEE
SPAN
TABLE
TD
TEXTAREA
TH
TR

2）濾鏡的屬性參數(shù)
a)設(shè)置透明度Alpha　　
語法:

復(fù)制代碼

代碼如下:
{ FILTER: Alpha(Opacity=n1,Finishopacity=n2,Style=#,Startx=x1,Starty=y1,Finishx=x2,Finishy=y2)}

"Opacity"透明度.從0到100,0代表完全透明.100代表完全不透明.
"Finishopacity"可選，指定結(jié)束時的透明度.0到100.
"Style"透明區(qū)域形狀.其中#可為:0代表統(tǒng)一形狀,1線形,2放射狀,3長方形.
"Startx"和"Starty"漸變透明效果的開始X和Y坐標(biāo).
"Finsihx"和"Finsihy"漸變透明效果結(jié)束X和Y的坐標(biāo).

復(fù)制代碼

代碼如下:

b)模糊Blur
語法:

復(fù)制代碼

代碼如下:
{filter:blur(add=add,direction=direction,strength=strength)}

"add""TRUE(默認)"或者"FALSE".指定圖片是否被改變成印象派的模糊效果.1為真，0為假
"direction"設(shè)置模糊的方向.0垂直向上,每45度為一個單位.默認值向左的270度.
"strength"有多少像素的寬度受到模糊影響,默認是5個像素.
c)透明Chroma
把指定的顏色設(shè)置為透明
語法:

復(fù)制代碼

代碼如下:
{filter:chroma(color=color)}

COLOR,設(shè)置為透明色的顏色的值
舉例：

復(fù)制代碼

代碼如下:
<img style="filter:chroma(color=white)" src="圖片" width="26" height="15" >

d)投射陰影DropShadow　　
語法:

復(fù)制代碼

代碼如下:
{filter:Dropshadow(Color=color,Offx=x,Offy=y,positive=positive)}

上一篇：css 超出用省略號當(dāng)標(biāo)題字符溢出用省略號表示

下一篇：css3.0 圖形構(gòu)成實例練習(xí)二

發(fā)表評論

共有條評論