CSS opacity - 实现图片半透明效果

在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坐标。 以上的参数可以选用，可以只设置一个opacity 例如： {filter:alpha(opacity=50)} 这个就是半透明的设置，只要把{}中的代码加入到需要设置的模版中的{}的即可，记得与前面的代码之间要用";"间隔，不然设置是无效的 例如： 我要设置模版区域背景的颜色（白色）+半透明 只要在 .modbox{} .modbl{} .modbc{} .modbr{} 中都设置background-color:white 这些就是模版背景设置的ID 然后再在.modbox,.modbl,.modbc,.modbr{}如果没有这个的话可以自己加一个 中加入filter : alpha(opacity=80)就可以达到所有模版的背景都是半透明的效果了 如果希望像我这样只显示blog的背景，别的都全透明的话，那么就在别的模版中加入背景全透明的代码即可 background:transparent                       这就是背景全透明的代码 不过这样的话，相关模版的主要区域是透明了，可是底下还会有一条颜色留着的，所以另外还要在 .modbl{} .modbc{} .modbr{} 中也加入背景全透明的代码，这样才能让模版区域完全透明，就像我现在的效果一样 另外这个参数目前只能用于背景色的设置，背景图片也可以设置为半透明 我把我的背景半透明代码贴出来吧 .modbox{padding:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #813533;border-right:1px solid #813533} .modbl{background:transparent;border-left:1px solid #813533;border-bottom:1px solid #813533;line-height:1px} .modbc{background:transparent;border-bottom:1px solid #813533;line-height:1px} .modbr{background:transparent;;border-right:1px solid #813533;border-bottom:1px solid #813533;line-height:1px} .modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}   这个效果在IE和Mozilla浏览器上都可以工作，代码如下 <img alt="powerbookg4.jpg" src="archives/images/powerbookg4.jpg" width="250" height="60" style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" onmouseover="this.style.MozOpacity=1; this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5; this.filters.alpha.opacity=50">   在IE中需要通过"filter"来定义透明度"opacity"，而在Mozilla中是可以直接解析"opacity",所以如果要使得这个效果在两种浏览器中都得到支持，需要把两种设定都加进去。针对IE的设定：this.filters.alpha.opacity=50　而针对Mozilla的设定：this.style.MozOpacity=0.5.　大家可以直接用这行代码给图片定义，只须修改图片地址就能实现上图效果。