使用CSS定義透明效果的方法，兼容IE和FF

2024-07-11 08:40:46

字體：大中小

供稿：網(wǎng)友

在CSS中有一個Alpha濾鏡，這個濾鏡可以設(shè)置目標(biāo)元素的透明度。還可以通過指定坐標(biāo)，從而實(shí)現(xiàn)各種不通范圍的透明度。具體語法如下：

引用內(nèi)容：

{filter： alpha(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy)}

具體參數(shù)：
opacity 透明度。默認(rèn)的范圍是從0 到 100，他們其實(shí)是百分比的形式。也就是說，0代表完全透明，100代表完全不透明。
finishopacity 是一個可選參數(shù)，如果想要設(shè)置漸變的透明效果，就可以使用他們來指定結(jié)束時的透明度。范圍也是0 到 100。
style    指定透明區(qū)域的形狀特征：0 代表統(tǒng)一形狀，1 代表線形，2 代表放射狀，3 代表矩形
startx   漸變透明效果開始處的 X坐標(biāo)。
starty   漸變透明效果開始處的 Y坐標(biāo)。
finishx 漸變透明效果結(jié)束處的 X坐標(biāo)。
finishy 漸變透明效果結(jié)束處的 Y坐標(biāo)。

測試：

filter:alpha(opacity=50);

#snake{
backgournd: #666;
filter:alpha(opacity=50); /*IE*/
-moz-opacity:0.5; /*MOZ , FF*/
opacity:0.5; /*CSS3, FF1.5*/
}

<div id="snake" >背景透明效果</div>

/****************百度的這個例子更簡單,哈哈
//透明層
<div id="dialogBoxBG" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 2999px; z-index: 10001; opacity: 0.4; background-color: rgb(238, 238, 238);"/>

//透明層上面的浮動層如登陸表單等等。
<div id="dialogBox" style="border: 1px solid rgb(112, 156, 210); z-index: 10003; position: absolute; width: 440px; left: 410.5px; top: 128px;">

opacity:0.4 //這種寫法只適用于FF
filter:alpha(opacity=50); //這種寫法只適用于IE
所以要這兩種同時寫上就能兼容了^_^

上一篇：CSS效果--動態(tài)更改list-style-type屬性

下一篇：使用3行CSS代碼使任何元素垂直居中