Menu
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?
842
This might help others who would want to use opacity, preventing a certain child element from getting opaque. You can use :not() Selector.
Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent, without some trickery. Values are a number from 0 to 1 representing the opacity of the channel (the “alpha” channel).
There's no CSS property that you can use to change the opacity of only the background image. Unlike background colors, which allow you to adjust the alpha channel to control opacity, it simply doesn't exist for the background-image property.
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.
184
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With