Question

我想在某些文字中使用不透明度的背景颜色，但是我希望不透明度仅在背景颜色上。在我的示例中，不透明度适用于颜色和背面。如何将不透明度仅保留为背景颜色？

        <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 notation设置背景颜色的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

在background-color:rgba(137, 52, 9, 0.3); css。

中添加p.last

请参阅演示：http://jsfiddle.net/akhurshid/YA7Sw/12/

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

Answer 4

这将解决您的问题。只需使用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>

不透明度仅适用于背面颜色而不适用于文本

4 个答案: