Luke Luke - 4 months ago 12
CSS Question

image still shows translucent opacity after change in opacity value

functionality:

The following page is translucent and has an

opacity: 0.68;
and within the page, I have an image with an
opacity: 1.0;
. The main idea is that the the image is placed in an overlay over the translucent background, and the image shouldn't be sharing the same translucent property as the background.

Issue:

The image within the translucent page is sharing the same translucent property, even though i have set the opacity property of the image to be 1.0.

How am I able to set the image to be of solid state without showing the opacity property that i have set from the main background?



.BrandMenu {
background-color: #D3D3D3;
filter: alpha(opacity=98);
opacity: 0.98;
}
.BrandDescription {
background-color: #FFFFFF;
filter: alpha(opacity=200);
opacity: 2.0;
}

<div id="Park_BrandDescription" class="BrandMenu" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=9; top:0px; margin:auto;">

<img id="Pa_Description" class="BrandDescription" style="position:absolute; width: 1080px; height:650px; top:500px; background-color: white; left:0px; z-index=99;">
</div>




Answer

The reason is explained in the answer of @eisbehr, but you can have a translucid background with rgba() values without affecting the opacity of the children elements:

.BrandMenu {
  background-color: rgba(211, 211, 211, 0.98);
}
.BrandDescription {
  background-color: #FFFFFF;
}
<div id="Park_BrandDescription" class="BrandMenu" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: block; top:0px; margin:auto;">

  <img id="Pa_Description" class="BrandDescription" style="position:absolute; width: 1080px; height:650px; top:500px; background-color: white; left:0px;" src="http://lorempixel.com/400/200">
</div>

And there's no 2.0 value of opacity, the maximum is 1.0(100%)

Comments