How to do a transparent background color on text?

Question

Look at http://www.sydsvenskan.se/ or just look at the image bellow, and check their big image with text overlaying it at the top of the site.

They have a black transparent background on the text, but the text itself isn't transparent. How do they accomplish this?

If I try to add transparency on a text block with background set, the text gets transparent as well.

Answer 1

CSS 3 introduces rgba colours . Use one for the background.

For compatibility with browsers that do not support it you can fallback to solid colours or translucent PNGs.

Answer 2

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

Answer 3

They use a semi-transparent PNG background image.

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

this is the safest approach at the moment, as long as not all browsers support rgba colours.

It will be an opaque grey in IE6, which doesn't support alpha transparency.

Answer 4

它具有黑色透明背景图像，对其进行调试 ，然后您将看到它。

Answer 5

Use 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)";
}

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