CODEWITHSUNDEEP
css
Ketan
Ketan

Reputation: 4280

How do I modify a div's transparency but not that of the div's text

just like the hotspots on Bing.com?

Edit: I am using jQuery's fadeTo() method to change the opacity of the divs.

Upvotes: 1

Views: 102

Answers (3)

Hussein
Hussein

Reputation: 42818

You need to use the RGBA background property on the container div. background: rgba(64, 64, 64, 0.5). 64, 64, 64 are the RGB color values. and 0.5 is the opacity value. Now parent can have it's own opacity value that will not be inherited by it's children. This is fully supported by FireFox, Opera, Chrome, Safari and IE9.

Check working example at http://jsfiddle.net/Rp5BN/

To support IE 5.5 to 8 we need to use vendor-specific CSS 'gradient filter:' So you need to add this.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);

Where 7f represents 127, i.e. 50% opacity and 404040 is the color.

Check working example in IE http://jsfiddle.net/Rp5BN/2/

Upvotes: 2

Brad Christie
Brad Christie

Reputation: 101614

#mydiv
{
  background-color: rgb(255,0,255); /* fallback color */
  background-color: rgba(255,0,255,0.5); /* bg with transparency */
}

Though I believe this is a CSS3 feature. I may in-fact me wrong though, it's been known to happen. ;-)

demo

Upvotes: 2

Kobi
Kobi

Reputation: 138097

You can use RGBA Colors (though they are not supported by older browsers):

background-color: rgba(255, 0, 0, 0.2)

Alternatives are to use a PNG background image, which can be partially transparent, or simplt to use two overlapping <divs>.

Upvotes: 3

Related Questions