Question

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

 .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对给定的图案没有影响 - 白色保持白色，渐变的黑色在下面。

我该如何解决这个问题？

感谢。

Answer 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>

Answer 2

你可以试试这个：

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

两个背景中的两个背景

2 个答案: