【半透明】 CSS 实现背景【半透明】 ★ ---金老师

IE过渡滤镜 + CSS3 rgba 即可完美实现。

具体实现代码如下：

 
.transparent {
    background:rgba(0, 0, 0, 0.3);
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000');
}
:root .transparent {
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000');
}

 提示：IE9 支持 filter 与 rgba 属性，这会导致其背景透明度双倍叠加！

解决：使用 :root 伪类为 IE9 单独写 HACK 并将其透明度降为 0 即可。

 

其中的“4c”：【最快最好的方法就是Javascript来获取：】

 

 
<script type="text/javascript">
alert(Math.floor(0.3 * 255).toString(16));//输出"4c"    //0.3为透明度，计算出4C  filter滤镜值
alert(Math.floor(0.6 * 255).toString(16));//输出"99"
</script>

 

 

jquery fadeIn使用png透明时出现黑边   【重点】

JQUERY fadeIn出现黑边一般是在IE浏览器下，由于使用了PNG的图片，在PNG透明区域FADEIN的时候，IE会先用黑色渲染，解决方案如下：

首先，由于之前大图使用的是IMG标签，先改成把图片当成DIV的背景图。

设置好DIV的高宽，然后设置inline-style

background:url(your.png);background:none;*background:none; 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="your.png", sizingMethod="crop");