image still shows translucent opacity after change in opacity value

Question

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: 1.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 1

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%)

Answer 2

You can't make an element fully visible with opacity, when the parent elements are not fully visible. The opacity is caclulated by the parents, and 1.0 is the maximum. Imaging a setup like this:

<div style="opacity: .5;">
  This text here has a opacity of 50%!
  <div style="opacity: .5;">
    This text here has a opacity of 25%!
    <div style="opacity: .5;">
      This text here has a opacity of 12.5%!
      <div style="opacity: 1;">
        This text here has still a opacity of 12.5%!
      </div>
    </div>
  </div>
</div>