css - 分区透明。里面的文字不透明

Question

是否可以使 div 透明但保持里面的文本不透明？

（我能想象的唯一解决方案是将文本放置在 div 之外并尝试将其放置在带有 z-index 的 div 顶部。但这会非常复杂，因为我有一个非常复杂的菜单）

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 */
}

score 6 · Accepted Answer

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

使用着色背景的 rgba 方法：

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

这使用红色、绿色、蓝色和 alpha 值（很像 Photoshop）而不是十六进制来计算颜色，并且因为它是背景颜色，所以它不会影响子元素。

:)

1 回答 1