时间戳

首页 > 解决方案 > 线性渐变背景覆盖其他元素（例如 img 或 text）

html - 线性渐变背景覆盖其他元素（例如 img 或 text）

问题描述

我正在使用 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>

标签： htmlcssbootstrap-4

解决方案

尝试这样的事情：

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

推荐阅读