Hello,
I am wanting to achieve the following effect:
A div with a white background color with a 40% opacity. This div is absolutely
positioned over a picture so that that picture comes through the div because of
its opacity setting. This part works fine.
Then in that div I want to use a <p> tag with a background color of white.
This is the part that is not working so well. It appears that this background
color is inheriting the opacity of the div it lives in as the white
background-color seems to have no effect. I have even reset the opacity of this
<p> by setting it to 100.
I'm sorry I can't provide a link, but here is my CSS and code. Hoping someone
can set me straight.
div.skiptomain
{
position:absolute;
height:35px;
width:145px;
top:0;left:380px;
border-bottom-left-radius:8px 8px;
background-color:#fff;
opacity:0.4;
filter:alpha(opacity=40);
}
div.skiptomain p
{
font-weight:bold;
background-color:#ffffff !important;
opacity:1.0;
filter:alpha(opacity=100);
}
<div class="skiptomain">
<p>Skip to main content</p>
</div>
Thank you!
Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
[email protected]
http://www.checkoutacollege.com/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
