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

Question

功能：

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

问题：

半透明页面中的图像共享相同的半透明属性，即使我已将图像的不透明度属性设置为 1.0。

我如何才能将图像设置为固态而不显示我从主背景设置的不透明度属性？

.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

当 parent 元素不完全可见时，您无法使用 opacity 使元素完全可见。 opacity是由parent计算出来的，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>

Answer 2

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

并且不透明度没有2.0值，最大为1.0(100%)

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

image still shows translucent opacity after change in opacity value

html

css

opacity