CSS IE背景透明的问题

html-css05

CSS IE背景透明的问题,第1张

在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>

方法一:针对ie,在子容器添加:position:relative针对firefox等就只能使用pngbackground:url(images/boxbg.png)/*以下只有ie识别*/*background:#cccccc方法二:简单描述一下,也是网上常见的方法。构造三个容器首先,让需要透明的容器和不透明容器保持兄弟关系。然后,通过父容器控制大小让两个兄弟容器通过定位保持一个看似父子的排列方式。方法二是规避了透明度的继承问题,并不是解决了透明度继承问题

ie6下的完全透明,直接使用transparent就能全部兼容

.bg{background:transparent}

2、只有半透明才需要用到filter滤镜来处理.

.bg{

background: #000000

filter:Alpha(opacity=50)/* 只支持IE6、7、8、9 */

position:static/* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */

*zoom:1/* 激活IE6、7的haslayout属性,让它读懂Alpha */

}