css使我们可以轻松的实现一些网页特效，比如：最常用的图片（网页）半透明效果。我们只需写入短短的一段代码就可以实现，但是有个问题却一直没有完美的解决，那就是不同的浏览器对css的读取方式的差异常常使得效果不能正常显示。
今天我写出的这段代码，可以实现图片半透明效果在IE和firefox浏览器上都正常显示。希望对大家有用。
<img alt="google logo.jpg" src="图片路径" width="250" height="100" style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:arrow;" onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100">
从代码中不难看出，我们针对两种浏览器，同一个效果的代码写了两遍。比如：moz-opacity:0.5和 filter:alpha(opacity=50)意思是一样的，只是前者是MOzilla的标准，而后者是IE的标准。以后我们写一些网页特效时可以参 考这个思路。
后话：这个代码虽然可以实现基本相同的效果，但仔细观察还是有所不同的：
1.在IE中，页面打开后图片显示半透明；而在mozilla中，页面打开后图片没有透明效果，必须是在onmouseover，onmouseout动作依次实现之后才有正常效果。不明白！
（谢谢一楼的朋友，原来是我粗心了，应该把style="moz-opacity:0.5修正为style="-moz-opacity:0.5，这样就对了！！）
2.在IE中可以正常显示的alt注释内容，在firefox下没有任何显示。很奇怪！
半透明图片效果，鼠标移动上去就透明，支持Firefox/IE
<head>
<title>测试一下半透明效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
background:#000;
}
.a {
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Moz + FF */
opacity:0.5; /* 支持CSS3的浏览器（FF 1.5也支持）*/
}
.a :hover {
filter:alpha(opacity=100); /* IE */
-moz-opacity:1; /* Moz + FF */
opacity:1; /* 支持CSS3的浏览器（FF 1.5也支持）*/
}
</style>
</head>
<body>
<img class="a"
src="http://www.fayaa.com/static/images/logo/snap_code.gif" alt="测试一下"
onmouseover="this.className='b'" onmouseout="this.className='a'" />
</body>
|
