css如何设置透明度(兼容ie,firefox)

html-css021

css如何设置透明度(兼容ie,firefox),第1张

css设置透明度，首先需要知道的是在浏览器中的不同使用，一般在ie中用的是filter:alpha(opacity=0)这个属性来设置div或者是块级元素的透明度，而在firefox中，一般就是直接使用opacity:0,对于兼容的，一般的做法就是在书写css样式的将2个都写上就行，就能实现兼容，具体看代码：

<html>

<head>

#div1{

width:200px

height:600px

margin:0 auto

opacity:0

filter:alpha(opacity=0)//0 代表的是隐藏，就是透明度最低。

}

</head>

<body>

<div id='div1'>

<p>测试文字。</p>

</div>

</body>

</html>

在CSS中有一个Alpha滤镜，这个滤镜可以设置目标元素的透明度。还可以通过指定坐标，从而实现各种不通范围的透明度。具体语法如下：

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

具体参数：

opacity 透明度。默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。

finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。

style指定透明区域的形状特征：0 代表统一形状，1 代表线形，2 代表放射状，3 代表矩形

startx 渐变透明效果开始处的 X坐标。

starty 渐变透明效果开始处的 Y坐标。

finishx 渐变透明效果结束处的 X坐标。

finishy 渐变透明效果结束处的 Y坐标。

测试：

filter:alpha(opacity=50)

#snake{

backgournd: #666

filter:alpha(opacity=50)

-moz-opacity:0.5

opacity:0.5

}

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