老外写的关于红狐filter滤镜解决方案 _Web前端

老外写的关于火狐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 src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity" />
</body>
</html>