html - 不透明度不起作用

Question

我正在尝试为网站上的三个按钮添加不透明度。我确实让它工作了，但是因为我在按钮中的文本也受到了影响，所以我尝试围绕它创建一个跨度，自从我开始摆弄它之后，我就再也无法让不透明度工作了。

有没有人看到我做错了什么？我要添加不透明度的部分是这个 div...

<div class="search_option_container_out">
    <div class="search_option_box">
        <ul>
            <li>Homes</li><!--
            --><li>Agents</li><!--
            --><li>fdfs</li>
        </ul>
    </div>
</div>

这里有一个 fiddle 来显示按钮的作用。这些按钮是三个深灰色按钮。

https://jsfiddle.net/zoue6gv7/

Answer 1

您确实添加了不透明度，按钮是灰色而不是黑色。

如果你添加

body {
     background-color: #009;
}

您可以看到按钮是半透明的。

如果你只想改变背景颜色而不是所有的 child ，你可以使用 background-color: rgb(24, 24, 24, 0.6) 而不是 opacity: 0.6 :

改变这个:

.search_option_box li {
    display: inline;
    border: 1px solid black;
    border-collapse: collapse;
    line-height: 2em;
    padding: 20px 75px;
    background: rgb(24, 24, 24);
    opacity: 0.6;
    color: #FFFFFF;
}

对此:

.search_option_box li {
    display: inline;
    border: 1px solid black;
    border-collapse: collapse;
    line-height: 2em;
    padding: 20px 75px;
    background: rgba(24, 24, 24, 0.6);
    color: #FFFFFF;
}