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

Question

查看http://www.sydsvenskan.se/或者只看下面的图片，然后检查他们的大图片，文字覆盖在网站顶部。

它们在文本上有黑色透明背景，但文本本身不透明。他们是如何做到这一点的？

如果我尝试在具有背景设置的文本块上添加透明度，则文本也会变得透明。

Answer 1

CSS 3介绍rgba colours。使用一个作为背景。

为了与不支持它的浏览器兼容，您可以回退到纯色或半透明PNG。

Answer 2

背景图片是关键http://www.sydsvenskan.se/template/ver2-0/gfx/trans_black.png

Answer 3

他们使用半透明的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透明度。

Answer 4

它有一个黑色的透明背景图片， firebug 它，你会看到它。

Answer 5

使用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/