CSS处理背景半透明-文字不透明效果

<p>以前在处理半透明背景，文字不透明的效果时，通常是写两个层，一个半透明的背景层，一个文字层，将文字层置于背景层上面。今天偶然看到一同行微博转发了个关于这种效果的处理办法，但内容不祥，太局限。只好自己再琢磨。</p>
<p>网上看到的有个方法可行，但有浏览器有差异。因此自己又改了下，添加了hack，并测试通过。</p>

.box{width:500px;height:300px;background-color:#09C;}
.title{width:500px;height:30px;line-height:30px;font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#FFF;background-color:rgba(0, 0, 0, 0.1);filter:Alpha(opacity=10)9;background:#0000009;}
.title span{position:relative;}

<div class="box">
<div class="title"><span>半透明效果</span></div>
</div>

<p>非IE的浏览器几乎都支持css3了，但IE7-8还需要滤镜，这样似乎有点耗性能，但通常又不是什么很大的站，可以忽略了。</p>