如何在CSS定义透明度的div中设置元素的透明度？

Question

我正在开发一个项目，其中我使用一张图片作为菜单的背景。我在CSS样式表中定义了类，用于控制当项目被选中或未被选中时的外观，即当用户不在每个项目所链接的页面上时。

我将一个div放置在图像上方，并应用样式使其具有半透明白色背景，因此它看起来像是图像的一部分被突出显示。每个半透明的div还包含组成链接的文本，颜色设置为白色。我希望div保持不透明度，而文本保持不透明度为“1”。

我尝试了一个类似问题中讨论的方法（CSS - Apply Opacity to Element but NOT To Text Within The Element），但这种方法对我似乎不起作用。

如果您想查看链接上JSFiddle的代码，请访问http://jsfiddle.net/Cwca22/uG5y8/。

非常感谢您提前的所有帮助。

- Cody Capella

---

感谢 Kolink、Nacho、techfoobar 和 jblasco 给我提供的所有解决问题的答案。现在一切都好了，再次感谢。;^) - Cody Capella

Answer 1

如果你正在寻找一个纯 CSS 的解决方案，并且愿意稍微更改一下你的标记，那么可以看一下这个例子：

http://jsfiddle.net/jJ4MZ/3/

它将每个“链接”视为单独的背景和文本元素的组合，然后将它们相互定位，以便只有背景div使用透明度。

- justisb

---

我能在商业项目中使用你的代码吗？我已经根据需要进行了一些修改，但我只是想确保它可以被使用。 - Cody Capella

没问题，很高兴能帮忙！ - justisb

Answer 2

如果我理解你的意思正确，你想让 div 的背景颜色部分透明以显示图像，但保持文本不透明？这很简单 :3

<div style="background-color: rgba(255,255,255,0.5);">Text</div>

如果您想为不支持此格式的浏览器提供支持，那么您需要：

<div style="background: #ffffff; background: rgba(255,255,255,0.5);">Text</div>

- Niet the Dark Absol

Answer 3

旧问题，目前还没有任何标准解决方案！这是今天的CSS所无法实现的。我所知道的唯一解决方案是使用JS。使用JS，您可以捕获受影响的H#的mousemove事件并创建/定位一个元素。这个新的“悬停”元素不应该是透明度为0.2的DIV的子元素。

- techfoobar

---

好的，我可能需要尝试一下，谢谢。我很惊讶还没有定义好解决这些问题的方法！ - Cody Capella

是的，我认真地说。我相信这个问题从CSS2设计之初就存在了。到目前为止，没有零标准跨浏览器实现这一点的方法！ - techfoobar

Answer 4

我曾为类似的问题编写过一个jsFiddle。这里是http://jsfiddle.net/A53Py/5/。

创建一个与没有透明度的元素同级的元素，将其绝对定位在它们的后面。不需要说明它是跨浏览器的。

希望这可以帮助到你。

- I.G. Pascual