不透明度僅適用於背景色而不適用於文本

我想在某些文本中使用不透明度的背景色，但我希望不透明度僅適用於背景色。在我的例子中，不透明度適用於顏色和背面。我如何才能將不透明度保持爲背景顏色？不透明度僅適用於背景色而不適用於文本

 <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

不透明度僅適用於背景色而不適用於文本

回答

相關問題