html - Disable opacity on child element when parent element has opacity

Question

I have a container with an opacity of 0.8. At the background, I have an image that shines through the content div. Now, I have a photo of my client in this container. The problem is, that it uses the opacity of the parent element as the opacity for this image is just relative to the container and not to the body.

I have this code:

<div id="contentContainer" style="background: #FFFFFF; opacity: 0.8">
    Content ...
    <img src="..." style="opacity: 1.0" alt="Photo" />
</div>

This does not work, as explained below.

Has anybody an idea?

Answer 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.