CSS Background Opacity Issues

Question

I have a white background behind my text. I have used CSS to reposition as stated. I want the background to have an opacity of .3, but it affects the foreground even though in the html it is in a different divide. I am a novice with aspects of css and look forward to a response from those with a little more expertise.

Part of the html is:

...
<p><span>Fri</span><span>When Announced</span></p>
<p><span>Sat</span><span>Open</span></p>

</div>

<div class=...
<img src="img/cross.png" alt="Cross" width="340" height="465"/>
</div>

<div id="bkgrnd"></div>

<div id="clear"></div>

</section>

...

The css is:

    #bkgrnd{
    background-color:#fff;
    border:1px solid #000;
    box-shadow:#332315 .3em .4em .2em;
    opacity: 0.3;
    width:750px;
    height:526px;
    margin-left:89px;
    margin-top:-55px;
    z-index:-2;
    }

possible duplicate of [I do not want to inherit the child opacity from the parent in CSS](http://stackoverflow.com/questions/5770341/i-do-not-want-to-inherit-the-child-opacity-from-the-parent-in-css) — Dan Blows, Feb 14 '13 at 21:44

score 0 · Answer 1 · answered Feb 14 '13 at 21:43

0

In order for opacity not to be inherited you need to use RGBa (alpha channel) instead of opacity.

See: http://www.css3.info/introduction-opacity-rgba/

Note that alpha channel is not supported by older browsers. You may need to make a CSS fallback.

answered Feb 14 '13 at 21:43

Diodeus - James MacFarlane

112,730
33
157
176

score 0 · Accepted Answer · answered Feb 14 '13 at 21:45

0

Using opacity will affect any children elements. You should instead use rgba on your background property, like this:

background-color: rgba(255, 255, 255, 0.3);

This will apply a background-color of white with a 30% opacity.

answered Feb 14 '13 at 21:45

zxqx

5,115
2
20
28

score 0 · Answer 3 · answered Feb 14 '13 at 21:47

View this article about using RGBa instead of opacity to cancel inheritance:

http://acidmartin.wordpress.com/2010/11/21/using-rgba-to-prevent-the-css-opacity-inheritance-from-parent-to-child-elements/

The article explains how to handle RGBa workarounds for IE 5-8

CSS Background Opacity Issues

3 Answers3