【问题标题】:Parent's transparent background is making child images transparent父母的透明背景使子图像透明
【发布时间】:2016-05-21 07:26:25
【问题描述】:

我已将主背景设置为透明,我将图像放在继承不透明度 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;
}

【问题讨论】:

标签: html opacity


【解决方案1】:

原来不透明通道是继承的

尝试改用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>

【讨论】:

  • 感谢您的回复,部分问题已解决,我后来完全不透明黑色背景,我必须将这个.logo, #logo { background-color: rgba(0, 0, 0, 1); 更改为这个.logo, #logo { background-color: Transparent; 然后它完美运行!谢谢!
猜你喜欢
  • 2011-09-15
  • 2016-12-08
  • 2010-11-22
  • 1970-01-01
  • 2012-05-26
  • 1970-01-01
  • 1970-01-01
  • 2011-07-06
  • 1970-01-01
相关资源
最近更新 更多