我正在使用 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>最佳答案
尝试这样的事情:
<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;
}
关于html - 线性渐变背景覆盖其他元素(如 img 或文本)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52719987/