opacity通用解决方案

在使用opacity设置背景透明的时候，多数人会这样写：、

html:

<div class="box">
   <p>测试啊</p>
</div>

class:

.box{

width:100px;

height:100px;

opacity: 0.5;

 filter:alpha(opacity  =  50);

}

.box p{color:#fff;padding:10px;}

恩，很好，看起来确实可以正常工作了。但问题是，层里面的文字也继承了透明度，严重影响了可读性，这体验太差了！

有没有更好的解决方案呢？答案是肯定的，如下所示：

.box{ 

width:100px;

height:100px;

background-color:rgba(0,0,0,0.5); 

background-color:none\0;

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);

zoom:1;
}
.box p{color:#fff;padding:10px;}