两个 div 中的两个背景相互叠加答案

【问题标题】：Two backgrounds over each other in two divs两个 div 中的两个背景相互叠加
【发布时间】：2018-01-31 17:42:01
【问题描述】：

我的代码目前看起来像这样（简化）：

 .bg-img { 
   background: url('../assets/img/pattern.img') repeat; 
   height: 100%; 
   width: 100%; 
   }
   
.main-content{ 
  background: radial-gradient(white, black)l;
  opacity: 0,5; 
  }

  <div class="bg-img">
      <div class="main-content">
      </div>
    </div>

我希望 .bg-img 类将 background-image 设置为在全屏（宽度：100%，高度：100%）上重复给定的图案，并将 .main-content 设置为背景设置为 radial-gradient(white,black) 以变暗整个.bg-img（模式）。

我可以显示两个背景，但radial-gradient 对给定的图案没有影响 - 白色保持白色，渐变的黑色在下面。

我该如何解决这个问题？

谢谢。

【问题讨论】：

是的，您可以使用多个背景，但您需要更清晰并提供更多代码
你有没有尝试过？你的意思是你的黑色实际上是透明的？
是的，我尝试在一个具有多个背景属性 (CSS3) 的 div 中执行此操作，但我不能只设置渐变的不透明度，因此不能这样完成。我是说我在 .bg-img div 中提供的图像下方是黑色。我希望将渐变设置为不透明度：0.5 以覆盖图案图像（变暗）
请在此处分享您的发现。我们会尽力帮助您。

标签： html css

【解决方案1】：

rgba() 可以帮助您。这也可以防止.main-content 的孩子在使用opacity: value 时继承不透明度的值

.bg-img {
  background: url('http://blogs.sitepointstatic.com/images/tech/687-background-repeat-round.png');
  width:100vw;
  height:100vh;
}
.main-content {
  background: radial-gradient(rgba(255,255,255, 0.5), rgba(0,0,0, 0.5));
  width:100vw;
  height:100vh;
}

<div class="bg-img">
  <div class="main-content">
  </div>
</div>

【讨论】：

谢谢！我复制了你的答案，但没有奏效。我必须编辑图案的颜色（从纯白色到深灰色），现在我可以看到结果了！它的工作:) 但我仍然不明白为什么白色图案不能做到这一点
你的意思是white的值？
这里是 .bg-img 背景图像的链接：i.imgur.com/gHKHHfX.png 当我复制你的代码时它仍然不可见。我改变了圆圈的颜色，然后它起作用了

【解决方案2】：

你可以试试这个：

.bg-img{ 
    background:   url('https://www.wallsandmurals.com/content/images/thumbs/0000336_sp1043_750.jpeg') repeat; 
    height:100vh; 
    width:100%;
}
.main-content{ 
  background: radial-gradient(white, black);
  opacity: 0.5;
  height: 100%;
  width: 100%;
}

<div class="bg-img">
    <div class="main-content">
    </div>
</div>

【讨论】：