很多时候，我们需要背景有一定的透明度，可是当我们给背景元素加了半透明属性opacity后，会发现，其中的文字也跟着相同程度的透明了。可是，这不是我们想要的结果。我们想要的是背景半透明，文字不透明。于是乎，头脑动起来，想办法解决呀。
嗯，直接上代码吧。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景透明，文字不透明</title> <style> *{ padding: 0; margin: 0; } body{ padding: 50px; background-color: #fff; } .demo{ width: 750px; height: 562px; padding-top: 50px; background: url("bg.jpg") no-repeat; } .bg{ width: 100%; height: 50px; background-color: rgba(135, 133, 156, 0.57) !important;/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */ filter:Alpha(opacity=57); background-color:#87859c; /* 使用IE专属滤镜实现IE背景透明 */ } .bg p{ position: relative; /* 实现IE文字不透明 */ color: #FFFFFF; line-height: 50px; text-align: center; } </style> </head> <body> <div class="demo"> <!-- 此处为了突出运行结果，特意加了一个背景图片 --> <div class="bg"> <p>背景透明，文字不透明</p> </div> </div> </body> </html>运行效果截图：
