If I have a div that acts like a box, and I make it real sexy with 10% opacity. How do I counter it since everything in the div also gets the opacity. Lets say i have a box(div) with a 1px border and text, putting opacity on it will make it look bad and i only want opacity on the background.
+6
A:
The contents of an element that have opacity inherit that opacity. You'll need to break it into two pieces: the background and the contents. Absolutely position the contents on top of the background. Your contents cannot be within the opacity element.
Diodeus
2010-05-11 13:22:01
This is true if you're talking about `opacity` the CSS property, but there are several other ways of achieving the effect.
e100
2010-05-11 14:15:23
+1
A:
Hi Jason,
Check this article: http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/
XaviEsteve
2010-05-11 13:23:05
+8
A:
This is how you can apply opacity on background colors only, and not to the whole element and his children:
background: rgba(0,0,0, 0.5) //gives you a black background with 50% opacity
you can test it out here: http://jsfiddle.net/ypaTH/
there was a similar question here: http://stackoverflow.com/questions/2757605/how-to-give-cross-browser-transparency-to-elements-background-only/2757677#2757677 (with IE version)
meo
2010-05-11 13:23:56
This (while being the 'correct' solution and a CSS3-feature) only works in modern browsers like Chrome, Firefox, Safari.
christian studer
2010-05-11 13:27:49
you can find the IE version in the other answer i gave on the previous toppic.
meo
2010-05-11 13:28:52
+2
A:
You could use a semi-transparent PNG image for the element's background. You'll need a fix such as Supersleight for IE6 support.
e100
2010-05-11 14:20:28
because of all the browser types i think a PNG is the best choice if i were not to use a lib like jquery or something (if it has the function i need). thanks all for all answeres!
Jason94
2010-05-12 09:21:55