日期:2014-05-16  浏览次数:20648 次

CSS透明度大汇总

  近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情。目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效。

  这篇汇总主要是提供一些CSS不透明的详细介绍,代码示例和解释,以实现这项有用的CSS技术在您的项目中兼容所有浏览器。

  关于CSS 透明度,有一点需要注意的是,它虽然使用了很多年,但它一直以来都不是一个标准属性。它是一种非标准技术,应该是CSS3规范的一部分。

1. 旧的Opacity设置

  以下代码是Firefox和Safari旧版本所需的透明度设置:

#myElement {
-khtml-opacity
: .5;
-moz-opacity
: 0.5;
}

  -khtml-opacity设置是针对旧版本的Webkit渲染引擎,这种专用属性现在已经过时了,除非你还有需要兼容Safari 1.x.的用户。

第二行使用专用属性?-moz-opacity是?为了兼容Mozilla渲染引擎的早期版本,以及追溯到Netscape Navigator。Firefox 0.9以后就不要求使用-moz-opacity属性,Firefox 3.5(现在使用Gecko引擎)已经不在支持这个属性。

2. 在Firefox, Safari, Chrome和Opera下的CSS透明度

  以下代码是除了IE外的所有当前浏览器的最简单,最最新的不透明度设置的CSS语法:

#myElement