在不透明度值更改后，图像仍显示半透明不透明度

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.

以下页面是半透明的并且具有不透明度：0.68;并且在页面内，我有一个不透明度的图像：1.0;。主要思想是将图像放置在半透明背景上的叠加层中，并且图像不应与背景共享相同的半透明属性。

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.

半透明页面中的图像共享相同的半透明属性，即使我已将图像的不透明度属性设置为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>

2 个解决方案

#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:

在@eisbehr的答案中解释了这个原因，但你可以使用rgba（）值的半透明背景而不影响子元素的不透明度：

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

并且没有2.0的不透明度值，最大值为1.0（100％）

#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:

当父元素不完全可见时，您无法使用不透明度使元素完全可见。不透明度由父母决定，1.0是最大值。对这样的设置进行成像：

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

#1