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

所属分类: 网络编程 / CSS/HTML 阅读数: 1092
收藏 0 赞 0 分享

前几天一位做网页设计的朋友问我这个问题:如何通过CSS来实现图片半透明效果,并且在IE和Mozilla上都可以得到支持。下面将我的方法分享给大家。

下图为通过CSS实现的图片透明效果

powerbookg4.jpg

这个效果在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. 大家可以直接用这行代码给图片定义,只须修改图片地址就能实现上图效果。

Image with link:
powerbookg4.jpg

更多精彩内容其他人还在看

CHM集锦(CHM)

CHM集锦(CHM)
收藏 0 赞 0 分享

IE与FireFox的兼容性问题

IE与FireFox的兼容性问题
收藏 0 赞 0 分享

DIV 居中的绝好解决方法

DIV 居中的绝好解决方法
收藏 0 赞 0 分享

解决 select 挡住div的解决方法

解决 select 挡住div的解决方法
收藏 0 赞 0 分享

网站首页head区代码规范

网站首页head区代码规范
收藏 0 赞 0 分享

动态更改网页HTML元素(对象)内容

动态更改网页HTML元素(对象)内容
收藏 0 赞 0 分享

如何处理多国语言

如何处理多国语言
收藏 0 赞 0 分享

Firefox CSS私有属性备忘记录

Firefox CSS私有属性备忘记录
收藏 0 赞 0 分享

CSS兼容要点分析

CSS兼容要点分析
收藏 0 赞 0 分享

css静态滤镜 + A:Hover

css静态滤镜 + A:Hover
收藏 0 赞 0 分享
查看更多