CSS实现文本背景半透明效果

2014-07-08 18:45:08|?次阅读|上传:wustguangh【已有?条评论】发表评论

关键词:HTML/CSS, 界面设计, Web|来源:唯设编程网

最近做一个网页,需要在图片下方使用半透明矩形区域显示图片对应信息,IE6不支持使用rgba实现背景色,同时其它浏览器不支持filter滤镜,不过幸好可以使用!important标签分别实现不同浏览器对应效果。CSS样式如下:

/*CSS*/
.waps{
   background:url(07158.bmp) no-repeat top center fixed; 
   width:1004px; text-align:center; 
   line-height:28px;
   font-size:12px;
   font-family:Arial, Helvetica, sans-serif;
}
.con{ 
   text-align:left; 
   width:500px; 
   height:400px;
   margin:0px auto;
   padding:100px 50px;
   background:rgba(255, 255, 255, 0.8) none repeat scroll 0 0 !important;/*实现FF背景透明,文字不透明*/
   filter:Alpha(opacity=80); 
   background:#fff;/*实现IE背景透明*/
}
/*实现IE文字不透明*/
.con p{
   position:relative; 
}

由于IE6不支持rgba的背景色,而其他浏览器不支持filter滤镜效果,所以使用了!important标记,对应测试用的HTML页面如下:

/*HTML代码*/
<body>
<div class="waps">
   <div class="con">
     <p>CSS实现背景透明,文字不透明(各浏览器兼容)CSS实现背景透明 
    </p>
   </div>
</div>
</body>

经过测试,上面的代码可以支持IE6以及firefox浏览器,成功使用CSS实现了文本背景半透明而文字不透明的效果^-^

发表评论0条 】
网友评论(共?条评论)..
CSS实现文本背景半透明效果