适用于所有浏览器的不透明度CSS？

Question

可以有人建议使用CSS给DIV标签设置不透明度的最安全方法吗？

Erik

- Erik

Answer 1

来自Css-Tricks.com（这涵盖了我所能想到的所有内容）：

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

- Justin Niessner

---

如果我想要完全透明，应该填写“1”还是“1.0”？ - Erik

100%的透明度等于0——因为设置是不透明。 - eselk

IE9和IE10怎么办？ - basZero

@basZero - IE9和10应该使用-ms-filter或opacity。 - Justin Niessner

Answer 2

这在任何浏览器中都可以工作。

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:”alpha(opacity=50)”;
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

或者您可以使用jQuery，在一行代码中完成它。

$('div').css({opacity:0.5});

请在 http://jsfiddle.net/397jv/ 查看工作示例。

- Hussein

Answer 3

尽管CSS 3引入了新的不透明度特性，但并不支持所有浏览器。这是一种在所有浏览器中实现透明效果的CSS技巧。

.transparent_class {  
 filter: alpha(opacity=50);  
 -moz-opacity: 0.5;  
 -khtml-opacity: 0.5;  
  opacity: 0.5;
}    

- Niloofar