老外写的关于火狐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> 

你可能感兴趣的:(filter,火狐滤镜,火狐不兼容filter)