css - 不透明度仅应用于背景颜色而不应用于文本

Question

我想在某些文本中使用不透明的背景色，但我希望只在背景色上设置不透明度。在我的示例中，不透明度适用于颜色和背面。我怎样才能保持背景颜色的不透明度？

http://jsfiddle.net/YA7Sw/

        <div class="col left">
            <p class="last"><span class="back" >here goes some text</span></p>
        </div>


p.last {
    color: #000000;
    font-family: helvetica,arial,sans-serif;
    font-size: 10px;
    font-weight: normal;
    line-height: 17px;
    margin-bottom: 17px;
}

.back { padding:5px;background-color:#893409;opacity:0.3; }​

Answer 1

不要设置跨度的不透明度，只需设置背景颜色的 alpha，使用 rgba notation :

.back { padding:5px;background-color:rgba(137, 52, 9, 0.3); }​

演示:http://jsfiddle.net/hRzMa/

请注意，您可能希望将其添加到 p，而不是 span。

段落演示:http://jsfiddle.net/9gqYn/