CSS opacity - 实现图片半透明效果的代码
更新时间：2007年03月21日 00:00:00 作者：
前几天一位做网页设计的朋友问我这个问题：如何通过CSS来实现图片半透明效果，并且在IE和Mozilla上都可以得到支持。下面将我的方法分享给大家。
下图为通过CSS实现的图片透明效果
这个效果在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">
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:
相关文章
web标准常见问题集合...2006-11-11
flash幻灯片需要先激活ActiveX控件才能使用的又一个办法
flash幻灯片需要先激活ActiveX控件才能使用的又一个办法...2007-11-11
2008-01-01
用DIV+CSS写小三角...2007-01-01
tbody Tab选项卡效果代码关键只是在<tbody>和选项卡的设置上。我在6个<tr></tr>段分别设置了<tbody></tbody>，目的是为了让一个javascript程序调用6个选项卡的时候可以循环设置tBodies属性。调用的时候是采用了遍历：将6个tBodies先全部都初始化为display='none'，然后紧接着将tBodies[n]设置为display='block'，将这一个tBodies显示出来。2008-03-03
input下的value值无法修改的解决方法2008-07-07
z-index是CSS中控制元素层级的属性，但其工作原理并不简单。本文将深入探讨z-index的工作原理，包括堆叠上下文、层叠顺序和层叠上下文等概念，并介绍z-index的应用技巧，如如何避免z-index的陷阱、如何使用z-index实现复杂布局等。2023-05-05
CSS网页布局中不推荐使用的HTML标签，请尽量不要使用这些HTML标签。2008-09-09
实用的利用 CSS + <em>标签 来完成一个三角形的制作
实用的利用 CSS + <em>标签 来完成一个三角形的制作...2007-04-04
Zen Coding css,html缩写替换大观 快速写出html,css
本文是在zen使用生产中遇到的问题做一些分享。2011-01-01
最新评论