如何在文本上做透明背景顏色？

看看http://www.sydsvenskan.se/或者只是看看下面的圖像，並檢查他們的大圖像覆蓋在網站頂部的文字。如何在文本上做透明背景顏色？

它們在文本上有黑色透明背景，但文本本身不透明。他們如何做到這一點？

如果我嘗試在背景設置的文本塊上添加透明度，文本也會變得透明。

enter image description here

來源

2011-04-15 jamietelin

他們使用透明'.png'，但也有替代品。 – thirtydot 2011-04-15 08:50:50

如果您知道任何，請分享:) – jamietelin 2011-04-15 08:52:25

他們使用一個半透明PNG背景圖像。

.supertop div h1 a { 
color: #FAFAFA; 
background-image: url("/template/ver2-0/gfx/trans_black.png"); 
padding: 2px 10px; 
line-height: 60px; 
}

這是目前最安全的方法，只要不是所有的瀏覽器都支持rgba顏色。

這將是一個不透明的灰色IE6，它不支持alpha透明度。

來源

2011-04-15 08:50:49

謝謝！爲什麼我沒有想到那麼簡單！：D – jamietelin 2011-04-15 08:51:43

背景圖像是關鍵http://www.sydsvenskan.se/template/ver2-0/gfx/trans_black.png

來源

2011-04-15 08:50:21 Anpher

它有一個黑色的透明背景圖像，螢火蟲它，你會看到它。

來源

2011-04-15 08:51:12 Arief

CSS 3介紹rgba colours。使用一個作爲背景。

爲了與不支持它的瀏覽器兼容，您可以回退到純色或半透明PNG。

來源

2011-04-15 08:51:31 Quentin

使用RGBa！

.alpha60 { 
/* Fallback for web browsers that doesn't support RGBa */ 
background-color: rgb(0, 0, 0); 
/* RGBa with 0.6 opacity */ 
background-color: rgba(0, 0, 0, 0.6); 
/* For IE 5.5 - 7*/ 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); 
/* For IE 8*/ 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; 
}

通過http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

來源

2011-04-15 08:57:47

這是一個很好的答案！ – jamietelin 2011-04-15 09:05:17

如何在文本上做透明背景顏色？

回答

相關問題