<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景透明，文字不透明</title> <style> *{ padding: 0; margin: 0; } body{ padding: 50px; background: #34735D; } h1 { position: absolute; left: 400px; } .test { padding: 25px; background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */ } .test p { font-size: 20px; font-weight: 700; color: #fff; } @media screen\,screen9 {/* 只支持IE6、7、8 */ .test{ background-color:#000; filter:Alpha(opacity=50); position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */ *zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */ } .test p { position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */ } } </style> </head> <body> <h1>这里是标题，会当做背景显示</h1> <div class="test"> <p>背景透明，文字不透明</p> </div> </body> </html>