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

Opacity设置di​​v中的所有内容,没有办法覆盖它.

使用rgba着色背景的方法:

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

这里使用红色,绿色,蓝色和alpha值(就像Photoshop中),而不是十六进制计算颜色和因为它是一个背景颜色不影响孩子的元素.

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

:)