css 实现层半透明,且块内文字不透明(兼容ie6等各种浏览器)

兼容各浏览器且效果一致,有两种方法:

一、使用 opacity + Alpha Filter

其实见到这个的时候,我们的第一想法当然是 background + opacity,在不支持 opacity 的 IE 再使用 filter 的 alpha 滤镜来实现。但是如果仅仅只是如此,这个最外层,最内层和文字,都被设置了 opacity(alpha 也是使用 opacity )导致文字模糊 。当然,我们可以给各层设置 opacity 变回来,但这是很麻烦的事,所以我这里将文字放在外层的p标签内,再给一个相对定位,(也可给绝对定位)让其显示在半透明的div里面。

代码如下:

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0 auto;}
body{background:url(006.jpg)}
.div{
filter:Alpha(opacity=40); background:#000;/*实现IE背景透明*/
-moz-opacity:0.4;/*支持3.5以下低的火狐背景透明*/
opacity:0.4;/*支持3.5以上火狐遨游,opera等背景透明*/
width:500px;
height:200px;
border:1px solid #FF0;
font-size:18px;
text-align:center;
font-weight:bold;
margin-top:120px;
}
p{position:relative;width:500px;height:200px;top:-200px;left:0;color:#FFF;}
</style>
</head>
<body>
<div class="div"></div>
<p>第一种:opacity + Alpha Filter:我是里面不透明的文字</p>
</body>
</html>

 

兼容标准浏览器及ie的6.0-9.0版本,预览的效果为:

 

二、最佳实践:rgba色彩 +Alpha Filter

其实我们可以选用 background-color: rgba() 来实现,同样可以实现透明效果,并且只应用于当前元素,不继承。而 IE 的 filter 却会使内部文字变透明(ie8-ie6),虽然ie的filter有很多滤镜效果,例如

(/* 

  1.  * filter 渐变滤镜详细用法,[参见这里] 
  2.  * StartColorStr 和 EndColorStr: 
  3.  *    #4c000000 是 30% 透明度的 #000000 的意思 
  4.  *    组成: # + 透明度 + 颜色 
  5.  *    算法: Math.floor(0.6 * 255).toString(16); 
  6.  */  
  7. .div{  
  8.     background:rgba(0, 0, 0, 0.3);  
  9.     filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000');  

),来避免内部文字透明,但是这种方法不常见,也需要转化,这里我们不用不常见的filter效果,还是用相对定位,避免文字的透明。

代码如下:

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0 auto;}
body{background:url(006.jpg)}
.div{
background:rgba(0, 0, 0, 0.4) none repeat scroll 0 0!important;/*实现FF背景透明*/
filter:Alpha(opacity=40); background:#000;/*实现IE背景透明*/
width:500px;
height:200px;
border:1px solid #FF0;
font-size:18px;
text-align:center;
font-weight:bold;
margin-top:120px;
}
:root .div{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000'); }  
p{position:relative;width:500px;height:200px;top:-200px;left:0;color:#FFF;}
</style>
</head>
<body>
<div class="div"></div>
<p>第二种:最佳实践:rgba色彩 +Alpha Filter,我是里面不透明的文字</p> </body> </html>

预览的效果为:

如果没有

:root .div{ filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000');  }  

IE9 的透明度竟然有 80%!! 这显然不是我们想法的。原因是:IE9 也支持 filter,使得 filter 的结果和 background-color 叠加,所以是 80%。

这里我们可以利用IE HACK,单独把 IE9 的 filter 变成透明度为 0 即可。高级浏览器大部分支持 :root 伪类,但不支持 filter 属性,而 IE 只有 IE9 支持,所以我们可以这样写。至于ie10以及更高的版本还有待继续测试。

 

ps:借鉴于高手的博客和自己的测试,有不对的地方,欢迎大家指正批评!

 

 

posted @ 2012-06-01 14:25 sheena的世界 阅读(...) 评论(...) 编辑 收藏