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.
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.
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).
You can use the background-color: rgba()
notation:
#theIdofYourElement, .classOfElements { background-color: #fff; background-color: rgba(255,255,255,0.5); }
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With