在IE浏览器中自IE9之后的图片透明度的设置方法都是一致的,而且是最简便的设置方式,CSS代码如下:
filter: alpha(opacity=70);
若果要兼容其他的浏览器的话,我通常的做法是直接使用透明度的设置方法,而不用对具体的其他浏览器分别设置样式,代码如下:
opacity: 0.7;
有这两句代码后,IE9 IE10 火狐 谷歌浏览器透明度设置都是没有问题的,但是在IE8中会有些异常,IE8中显示结果如图:
图片放大后就会发现异常点在哪
是的,图片四周会出现小黑色边框,一开始我以为是边框设置不正确,进过自己测试才发现,是在IE8 下的图片透明度设置未生效,所以在加上IE8中设置透明度的代码,如下:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=70)";
这样一来图片的透明度设置就生效了,不过为了很好地兼容IE浏览器(主要是IE8、9...)不同版本,以及其他浏览器(火狐、谷歌)等,直接使用下面的代码:
filter: alpha(opacity=70);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=70)";
opacity: 0.7;
这样就没问题了
才开始学习Web,如果有不对的地方,希望大家多多指教,祝快乐