管理的内涵css如何实现背景透明，⽂字不透明？
之前做了个半透明弹层，但设置背景半透明时，⼦元素包含的字体及其它元素也都变成了半透明。对opacity这个属性认识的不透彻，在这⾥做⼀些总结，⽅便以后使⽤。
背景透明，⽂字不透明的解决⽅法：
1. 为元素添加⼀个绝对定位的⼦元素，设置⼤⼩和该元素⼀样，把半透明加在绝对定位元素上作为遮罩，z-index设置到最底部，达到背
景半透明效果。
2. 使⽤CSS3新属性rgba。
实现透明的⽅法：
css3的opacity，取值从 0 到 1，如opacity : 0.5，IE9及以上版本和标准浏览器都⽀持。IE8 以及更早的版本⽀持替代的 filter 属性，例如：filter : Alpha(opacity=50)。
css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如background-color : rgba(255,255,255,0.5)。
⾕歌浏览器下测试各种属性，如下图。
<div ><div>没有设置透明度</div></div>
<div ><div>⽤opacity设置透明度</div></div>
<div ><div>⽤rgba设置透明度</div></div>
<div ><div>IE专属filter设置透明度</div></div>
图1
css3的opacity：
由图1可以看出，使⽤opacity属性的第⼆个⽅块其⼦元素包含的⽂字也变成了半透明。
注释：设置opacity元素的所有后代元素会随着⼀起具有透明性，⼀般⽤于调整图⽚或者模块的整体不透明度，兼容IE9及以上版本和标准浏览器。
css3的rgba：
由图1可看出，设置rgba的⽅块可实现背景⾊透明，并且⼦元素包含的⽂字不透明。
注释：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+都⽀持。
IE的filter : Alpha(opacity=x)：
仅⽀持IE6、7、8、9，在IE10版本被废除。
在IE6、7中，需要激活IE的haslayout属性(如：*zoom:1或者*overflow:hidden)，让它读懂filter:Alpha。
在IE6、7、8中，设置了filter:Alpha的元素，⽗元素设置position : static(默认属性)，其⼦元素为相对定位position : relative，可让⼦元素不透明。
全兼容：
IE6IE7IE8IE9标准浏览器
rgba✘✘✘✔✔
filter : Alpha✔✔✔✔✘
只⽀持IE6、7、8浏览器的css hack：抗维生素D佝偻病
/* 只⽀持IE6、7、8 */
@media \0screen\,screen\9 {...}
DEMO：
<!DOCTYPE html>
<html>
<head>
<meta chart="utf-8">
<title>背景透明，⽂字不透明</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #ff7a74;
padding: 100px;
}a了是什么意思
.test-opacity{
秋季煲汤
padding: 25px;
background-color: rgba(255,255,255,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */ }
/* 只⽀持IE6、7、8 */
@media \0screen\,screen\9 {
.test-opacity{
background-color: #fff;梦到做手术
filter: Alpha(opacity=50);
搬嫁妆
*zoom:1;/* 激活IE6、7的haslayout属性，让它读懂Alpha */
王子仪}
.test-opacity p{
人参开花
position: relative;/* 设置⼦元素为相对定位，可让⼦元素不继承Alpha值 */
}
}
</style>
<body>
<div class="test-opacity">
<p>背景透明，⽂字不透明</p>
</div>
</body>
</html>
