Disable opacity on child element when parent element has opacity

Solution 1:

Solved this problem by changing it to the following:

<div id="contentContainer" style="background: rgba(255,255,255,0.8);">
    Content ...
    <img src="..." alt="Photo" />
</div>

Used just rgba alpha instead of opacity. Now it works.

Solution 2:

As the other answers state, this is not possible using opacity, that is, with this method.

A workaround/hack would be to add position: relative; z-index:2; to the parent element contentContainer. Then to add another element which has the opacity and other stuff on it. This is particularly useful if you have an image as the background

So your markup should look a little like this:

HTML

<div id="contentContainer">
    Content ...
    <img src="..." alt="Photo" />
    <span id="contentBackground"></span>
</div>

CSS

#contentContainer { position: relative; z-index 2; }
#contentBackground {
    position: absolute;
    display: block;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: /* stuff */;
}

Note the z-index property. These are important for making sure that the background element sits below the parent and doesn't overlap the content preventing click events.

This method could also be used with pseudo elements (:before or :after) for which you'd need to add content: '';.