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

看看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

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

回答

相关问题