Sluggers,
After no luck googling for a solution I've decided to post this possibly off topic question to the wisdom of slug (well the web server is apache on Linux and the client is Mozilla or Firefox on Linux).
I'm trying to create an area on a web page with a translucent background but with solid text inside that area. I'm trying to do it using a style sheet. I can get the translucent area on the background no problem with opacity:0.5, but any text that I put on it is also translucent. It seems that any subsequent divs or classes inhereit the opacity and I can't over ride it. I.E opacity=1.0 means 100% of the 50% of the parent = 50%.
I need to be able to say opacity=2.0, i.e 200% of 50% = 100% making it solid but opacity: 2.0 don't work. Also tried position relative tag (but according to the author that only works in ie)
This is what I've currently got in the style sheet.
body {background: #fff url(iceberg.png) no-repeat bottom right; } #areaBox {
position: relative;
top:50px;
left: 50px;
width: 200px;
opacity: 0.5;
background: #fc0;
} #areaText {
position:relative;
opacity:none;
color:#000;
}... [snippet of web page]
<div id=areaBox>
<div id=areaText>
<h2>Some text</h2>
</div>
</div>
Anyone solved this one?
TIA's
Pete. -- SLUG - Sydney Linux User's Group Mailing List - http://slug.org.au/ Subscription info and FAQs: http://slug.org.au/faq/mailinglists.html
