用CSS来实现背景透明文字不透明全兼容的方法
在div+css网站布局中，经常要用到背景透明，所在背景的文字内容也会跟着透明，但有时文字需求是不透明的，确实让我们web前端开发者很苦恼，解决这个问题方法有二，第一背景用图片，第二那就是用css来解决。
1.背景透明，文字也透明，以下代码我们常用但不是我们想要的
filter:alpha(opacity=50); //IE滤镜，透明度50%
-moz-opacity:0.5; //Firefox私有，透明度50%
opacity:0.5; //其他，透明度50%
2.背景透明，文字不透明，这是我们想要的结果，全兼容各大浏览器的方法
先看下效果图：
例子代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明，文字不透明</title>
<style>
*{padding:0;margin:0;}
body{padding:50px;}
.demo{padding:25px;background-color: rgba(0,0,0,0.5);} /* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
.demo p{color: #FFFFFF;}
/*征对IE9以下浏览器做兼容性处理*/
@media \0screen\,screen\9 {
.demo{background-color:#000000; /* 只支持IE6、7、8 */
filter:Alpha(opacity=50);
position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
*zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
}
.demo p{position:relative;} /* 设置子元素为相对定位，可让子元素不继承Alpha值 */
}
</style>
</head>
<body>
<div class="demo">
<p>背景透明，文字不透明</p>
</div>
</html>
除注明外的文章,均为来源:老汤博客,转载请保留本文地址！
原文地址：https://tangjiusheng.cn/divcss/88.html
原文地址：https://tangjiusheng.cn/divcss/88.html