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

【问题标题】：image still shows translucent opacity after change in opacity value更改不透明度值后，图像仍显示半透明不透明度
【发布时间】：2016-12-02 12:07:38
【问题描述】：

功能：

以下页面是半透明的，并且有一个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>

【问题讨论】：

标签： html css opacity

【解决方案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%)

【讨论】：

【解决方案2】：

当父元素不完全可见时，您不能使用opacity 使元素完全可见。 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>

【讨论】：