老外写的关于火狐filter滤镜解决方案
语法
opacity: <number> | inheritValues
A <number> in the range 0.0 to 1.0. Any value smaller or larger is clamped to this range.
0
The element is fully transparent (that is, invisible).
number between 0 and 1
只在火狐中中使用的滤镜CSS
hbox.example {
opacity: 0.5; /* see the background through the hbox */
}
跨浏览器的样式定义
pre { /* make the box translucent (50% opaque) */
border: solid red;
opacity: 0.5;
filter: alpha(opacity=50); /* IE8 and lower */
zoom: 1; /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
}
网页成功测试例子
<html>
<head>
<style>
img.opacity {
opacity: 1;
filter: alpha(opacity=50);
zoom: 1;
}
img.opacity:hover {
opacity: 0.5;
filter: alpha(opacity=100);
zoom: 1;
}
</style>
</head>
<body>
<img style="max-width: 100%;height: auto;width: auto\9;" src="//developer.mozilla.org/media/img/mdn-logo.png" alt="老外写的关于红狐filter滤镜解决方案" width="128" height="146" />
</body>
</html>