CODEWITHSUNDEEP
htmlcsstexttransparent
lejahmie
lejahmie

Reputation: 18253

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

enter image description here

Upvotes: 0

Views: 808

Answers (5)

Anand Thangappan
Anand Thangappan

Reputation: 3106

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/

Upvotes: 1

Quentin
Quentin

Reputation: 943108

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.

Upvotes: 2

Arief
Arief

Reputation: 6085

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

Upvotes: 1

Pekka
Pekka

Reputation: 449385

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.

Upvotes: 1

Marcis
Marcis

Reputation: 4617

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

Upvotes: 1

Related Questions