How to do a transparent background color on text?

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 tr开发者_高级运维ansparent. How do they accomplish this?

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

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.

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.

Background image is the key http://www.sydsvenskan.se/template/ver2-0/gfx/trans_black.png

it has a black transparent background image, firebug it and you'll see it.

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/