Hi, I have a div with 60% opacity, to show part of a background image behind the div. Because the opacity is at 60%, the text in that div appears as grey.
Is there anyway to override this level and make the text appear black?
Any advice appreciated.
Thanks.
Set the opacity on the background rather than the element.
background-color: rgba(255,0,0,0.6);
A while ago I wrote about how to achieve this in a backwards compatible way.
The opacity applies to the whole div and all of its children. Unfortunately, you cannot undo that opacity, but only add more. And besides that, there's no way for CSS to select the text inside an element.
In your case, the best solution is to apply a transparent background image (with PNG) to your div block, like a white one pixel image with 60% opacity.
Another solution would be to use different boxes and positioning, like described in this tutorial by Steven York.
this should answer just about all of your questions: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
The simplest solution would be to create a semi-transparent PNG with the correct colour and use that as a background image.
Another solution that may be possible depending on your layout is to put the text in a separate layer and position that over the top of the semi-transparent part. Something like this would work:
<div style="position: relative; background-image: url('your_image.jpg')">
<div style="opacity: 0.5; background-color: #fff; position: absolute"></div>
<div style="position: absolute">The text to go on top</div>
</div>
You'd need to add your own positions/sizes (the top, left, width and height properties) as appropriate.
The RGBA solution is really simple! Too bad it doesn't work in IE7, I love the idea of a one-line CSS solution. For now I'll have to settle for my old clunky way with divs and quite a bit of CSS.
here are two method to make transparent div. http://www.templatespoint.com/blog/2010/10/set-opacity-to-div/