Parent 的透明背景使 child 图片透明

Question

我已将我的主背景设置为透明，我将图像放在背景之上，它继承了不透明度 0.4，我不希望这样。我希望它是 100%。我什至试过 opacity 1.0 没用这是我的代码：

HTML:

<!-- Background -->
<img src="img/bg.jpg" id="bg" alt="">

<!-- The image -->
<div class = "row">
    <div class = "logo">

      <img src="img/logo.png" width="100%" height="141" id="logo" alt="Title" /> 
      </div>
      </div>

CSS:

//Background
    #bg {
      position: fixed; 
      top: 0; 
      left: 0;
      opacity: 0.4; 

      width: 100%;
      min-height: 100%;
    }

//the image
#logo {
    opacity : 1.0;!important;
}

Answer 1

原来opacity通道是继承的

尝试使用 rgba 属性代替：

background-color: rgba(0, 0, 0, 1); /* red, gree, blue, alpha (opacity) */

来源： 答案改编自 this one

#bg {
  z-index: -1000;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.4;
  width: 100%;
  min-height: 100%;
}

.logo,
#logo {
  background-color: rgba(0, 0, 0, 1);
  padding:0;
  margin: 0;
}

<!-- Background -->
<img src="http://lorempixel.com/400/400" id="bg" alt="">

<!-- The image -->
<div class="row">
  <div class="logo">
    <img src="http://lorempixel.com/300/150" width="100%" height="150" id="logo" alt="Title" />
  </div>
</div>

Parent 的透明背景使 child 图片透明

Parent's transparent background is making child images transparent

html

opacity