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

不要设置跨度的不透明度，只需使用rgba 表示法设置背景颜色的 alpha ：

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

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

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

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

Answer 2

听起来您想使用透明背景。尝试这样的事情：

p.last
{
    background: rgb(54, 25, 25); /* Fall-back for browsers that don't support rgba */
    background: rgba(54, 25, 25, .5);
}

http://jsfiddle.net/ashwyn/MDcq2/

Answer 3

这将解决您的问题。只使用 rgba

<p class="last"><span class="back" >here goes some text</span></p>
</div>
<style>
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: rgba(180,38,22, 0.2); }​
 </style>

Answer 4

加入css background-color:rgba(137, 52, 9, 0.3);。p.last

见演示：http: //jsfiddle.net/akhurshid/YA7Sw/12/

注意：rgba 取 0 - 255 之间的整数值