Div透明。里面的文字不透明

Question

是否可以让div透明但让文本不透明？

（我可以想像，唯一的解决办法是将文本定位在div外，并尝试将其定位上的z-index的div顶部，但因为我有一个非常复杂的菜单，这将是很复杂）

这里是简化的情况：http://jsfiddle.net/5Jmzh/3/

HTML：

<ul class="menu"> 
    <li>first</li> 
    <li id="second"> second </li> 
    <li>third</li> 
</ul> 

CSS：

#second { 
    background:red; 
    opacity: 0.3; 
    filter: alpha(opacity = 30); /* A lower value makes the element more transparent */ 
} 

Answer 1

不透明度设置该div内的所有内容，因此无法覆盖它。

改用着色背景的RGBA方法：

#four { 
    background: rgba(255, 0, 0, .3); 
... 
} 

这里使用红色，绿色，蓝色和alpha值（就像Photoshop中），而不是十六进制计算颜色和因为它是一个背景颜色没有关系不会影响孩子的元素。

http://jsfiddle.net/5Jmzh/1/

:)