跨浏览器透明度

Avatar of Chris Coyier
Chris Coyier

如今,您不必再担心透明度在跨浏览器环境中难以实现。您只需使用 opacity 属性,如下所示:

.thing {
  opacity: 0.5;
}

0 表示完全透明(将完全不可见,类似于 visibility: hidden),而 1 表示完全不透明(默认值)。介于两者之间的任何值表示部分透明。

出于历史原因,我们过去是这样做的:

.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;
}