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

Question

功能：

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

问题：

尽管我已将图像的 opacity 属性设置为 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>

- Luke

Answer 1

这个问题的解释可以在 @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%）

- Marcos Pérez Gude

Answer 2

当父元素不完全可见时，使用 opacity 无法使元素完全可见。透明度是由父元素计算的，最大值为 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>

- eisbehr