Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a div's background color translucent?

Tags:

css

opacity

I only want the background color of white in my div to be translucent roughly 50%. The content should be fully opaque. What's the proper way to do this? I imagined when I looked up the background CSS property, I'd find an opacity setting, but didn't. Don't care about IE6.

UPDATE: solving with the rgba solution given below in conjunction with CSS3PIE's solution for getting rgba to work in IE browsers.

like image 937
at. Avatar asked Jan 18 '11 21:01

at.


People also ask

How do I make my background color less opaque?

Changing the opacity of the background color only To achieve this, use a color value which has an alpha channel—such as rgba. As with opacity , a value of 1 for the alpha channel value makes the color fully opaque. Therefore background-color: rgba(0,0,0,. 5); will set the background color to 50% opacity.

How do you make a background color transparent in CSS?

To set the opacity of a background, image, text, or other element, you can use the CSS opacity property. Values for this property range from 0 to 1. If you set the property to 0, the styled element will be completely transparent (ie. invisible).


1 Answers

You can use the background-color: rgba() notation:

#theIdofYourElement, .classOfElements {     background-color: #fff;     background-color: rgba(255,255,255,0.5); } 


Edited to add the default background-color (for browsers that don't understand the rgba() notation). Albeit I was under the impression that all but IE do understand it (but I could be wrong, and haven't tested to be sure...).

Edit with thanks to @akamike.


Edited to address question from OP (in comments):

which browsers don't understand rgba? will they all in the future, is this part of css3?

The best information I could find is the CSS Tricks' rgba() browser support table, with a link to a demo and 'more complete' compatibility table.

like image 193
David Thomas Avatar answered Sep 22 '22 08:09

David Thomas