您的位置：站点首页 > 技术文章 >正文

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实现文本背景半透明效果