Question

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

Answer 1

不，没有办法执行此操作，因为子项从父项继承opacity属性（无法更改），<option>元素不能存在于{{1}之外} element。

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

如果您没有使用0元素，我会说您可以使用带有z-index的<select>或position: relative;将文字覆盖在{{1}的父元素上已设置为零。

我记得当我第一次开始深入了解网络开发的精彩世界时，我自己也在研究这个问题。这种情况是w3schools如何提供不良信息的一个完美例子，因为他们的例子看起来可以做到这一点。

如果真的需要一个解决方案，那么我会建议你做我们都喜欢做的事情，当现有工具不存在时：发明一个。制作您自己的position: absolute元素版本，并使用JavaScript使其工作。您甚至可以创建自己的XML标记并使用JavaScript来告诉它如何呈现和操作。或者，你可以使用opacity s，<select>（当然还有其他人）以及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元素以使其可以设置样式。

CSS元素和文本不透明度

2 个答案:

修改