Question

我正在使用CSS和Bootstrap 4编写代码。我已经设置了渐变背景，但是当我开始添加其他元素（例如图像或文本）时，由于渐变位于它们之上，因此它们看起来基本上是不可见的。有解决办法吗？

.background{
    background-image: linear-gradient(to top, black, white);
    opacity: 0.3; 
    }

<html>

<div class="background"> 
    <div class = "row"> 
      <img src"https://devfest.gdg-taipei.org/images/logos/google.svg"> 
    </div> 
</div> 


</html>

Answer 1

尝试这样的事情：

<div class="background"> 
    <div class="background-curtain"></div>
    <div class = "row"> <!--First Section-->
        <img src="img.png"> 
    </div> 
    <div class = "row"> <!--Second Section-->
        <p>Hello</p> 
    </div> 
</div>

CSS：

.background{ 
        position: relative;
    }
    .background-curtain{
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to top, black, white);opacity: 0.3;
        z-index: -100;
    }

Answer 2

.background{
    opacity: 0.3; 
  }
  .row{
    position:absolute;
    background-image: linear-gradient(to top, black, white);
    z-index:0;
    width:100%;
    height:100%;
    top:0;
    left:0;
  }
  .image{
    position:relative;
    z-index:1;
  }

<html>

<div class="background"> 
    <div class = "row"> 
    
    </div> 
    <div class="image">
      <img src="https://devfest.gdg-taipei.org/images/logos/google.svg"> 
    </div>
</div> 


</html>

据我了解您的问题，可能会对您有帮助

线性渐变背景会覆盖其他元素（例如img或文本）

2 个答案: