直接上代碼,兼容IE,firefox,chrome,Safari,Opera等主流瀏覽器的半透明CSS代碼:
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
幾個(gè)屬性的意思是:
opacity: 0.5; CSS的標(biāo)準(zhǔn),支持chrome,firefox, Safari和 Opera,取值范圍0-1。
filter:alpha(opacity=50); 這個(gè)是為IE設(shè)的,取值范圍0-100。
-moz-opacity:0.5; 支持老版本的Mozilla,取值范圍0-1。
-khtml-opacity: 0.5; 支持老版本的Safari瀏覽器,取值范圍0-1。
以下是測試代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>利用CSS實(shí)現(xiàn)半透明效果兼容IE與火狐與chrome等瀏覽器</title>
</head>
<body style="background:#09f;">
<div class="tm_fontzhi">通過CSS實(shí)現(xiàn)半透明,兼容IE,firefox,chrome等主流瀏覽器</div>
<div class="tm_fontbg"></div>
<style>
.tm_fontbg {
position:absolute;top:50px;right:50px;bottom:50px;left:50px;background:#000;z-index:99; /* 這段代碼是為了實(shí)現(xiàn)div固定位置的不用在意這段 */
filter:alpha(opacity=50); /* 這個(gè)是為IE設(shè)的,取值范圍0-100。 */
opacity: 0.5; /* CSS的標(biāo)準(zhǔn),支持chrome,firefox, Safari和 Opera,取值范圍0-1。 */
-moz-opacity:0.5; /* 支持老版本的Mozilla,取值范圍0-1。 */
-khtml-opacity: 0.5; /* 支持老版本的Safari瀏覽器,取值范圍0-1。 */
}
.tm_fontzhi {position:absolute;top:90px;right:90px;bottom:90px;left:90px;padding:0 20px;color:#fff;z-index:100;}
</style>
</body>
</html>