兼容多浏览器的CSS背景透明

最新推荐文章于 2021-08-04 00:48:23 发布

weixin_34354173

最新推荐文章于 2021-08-04 00:48:23 发布

阅读量113

点赞数

本文详细介绍了CSS中的Alpha滤镜及其应用，包括如何设置元素透明度，并通过指定坐标实现不同范围内的透明效果。此外，还提供了兼容不同浏览器的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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); /*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: #eeeeee;”/>

//透明层上面的浮动层如登陆表单等等。
<div id=”dialogBox” style=”border: 1px solid #709cd2; z-index: 10003; position: absolute; width: 440px; left: 410.5px; top: 128px;”>

opacity:0.4 //这种写法只适用于FF
filter:alpha(opacity=50); //这种写法只适用于IE
所以要这两种同时写上就能兼容了