html - CSS 元素和文本不透明度

Question

是否有任何选项可以将元素的不透明度（在我的情况下为下拉菜单）设置为零，但该元素中的文本不透明度设置为 100 ？我想这样做，因为不透明度为 0 我可以隐藏箭头，但文本也隐藏了，所以我需要一个解决方法

Answer 1

不，没有办法做到这一点，因为子级opacity从父级继承属性（这是无法更改的），并且<option>元素不能存在于<select>元素之外。

换句话说，如果将<select>元素设置opacity为0，则实际上是隐藏了该元素及其子元素。

如果您不使用<select>元素，我会说您可以使用position: relative;或position: absolute使用 z-index 将文本覆盖在opacity已设置为零的父元素上。

我确实记得当我第一次开始潜入 Web 开发的美妙世界时，我自己研究过这个问题。这种情况是 w3schools 如何提供不良信息的完美示例，因为他们的示例看起来可以做到这一点。

如果你真的需要一个解决方案，那么我建议你在没有现有工具的情况下做我们都喜欢做的事情：发明一个。制作您自己的<select>元素版本，并使用 JavaScript 使其工作。您甚至可以制作自己的 XML 标记并使用 JavaScript 告诉它如何呈现和操作。或者，您可以只使用<div>s、<span>s（当然还有其他）以及 CSS 和 JavaScript 来实现这一点。

祝你好运！:)

Answer 2

不，不透明度适用于整个元素（包括后代）。但是，您可以使用具有透明度的颜色作为背景（假设它是纯色）

div {
    background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
    color: black; /* text is black with 100% opacity */
}

演示在http://jsfiddle.net/ESzTT/1/

编辑

就像 Zachary Kniebel 在他的回答中所说的那样，这对<select>元素<option>不起作用。您可以使用包含其他元素的下拉菜单，或者如果这是针对表单字段的，则可以使用 javascript 库替换 DOM 元素以使其具有样式。