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

我想在某些文本中使用不透明度的背景色，但我希望不透明度仅适用于背景色。在我的例子中，不透明度适用于颜色和背面。我如何才能将不透明度保持为背景颜色？不透明度仅适用于背景色而不适用于文本

 <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; }

来源

2012-07-11 EnexoOnoma

的可能重复背景的不透明度，而不是文本（http://stackoverflow.com/questions/637921/opacity-of-background-but-not-the-text） – Chandu 2012-07-11 12:53:30

不要设置你的跨度的不透明度，只是设置背景色的α，使用rgba notation：

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

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

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

论证段落：http://jsfiddle.net/9gqYn/

来源

2012-07-11 12:51:09

为什么我无法使用白色工作？ http://jsfiddle.net/9gqYn/1/ – EnexoOnoma 2012-07-11 12:59:02

使用'rgba（255,255,255,0.3）;'，而不是'rgba（ff，ff，ff，0.3）;' – 2012-07-11 13:00:03

这听起来像你想使用一个透明背景。尝试是这样的：

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/

来源

2012-07-11 12:52:06 Ashwin

在p.last CSS添加background-color:rgba(137, 52, 9, 0.3);。

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

注：RGBA取整数值从0 - 255

来源

2012-07-11 12:54:59

为什么我不能得到白色工作？ http://jsfiddle.net/YA7Sw/13/ – EnexoOnoma 2012-07-11 12:58:02

它应该是'background-color：rgba（256,256,256,0.3）;'not'background-color：rgba（ff，ff，ff，0.3）; '看看demo：http://jsfiddle.net/akhurshid/YA7Sw/15/ – 2012-07-11 13:01:51

注意：rgba取整数值。 – 2012-07-11 13:02:55

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

来源

2012-07-11 13:08:44 Avinash

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

回答

相关问题