gpt4 book ai didi

html - 线性渐变背景覆盖其他元素(如 img 或文本)

转载 作者:行者123 更新时间:2023-11-28 15:09:43 25 4
gpt4 key购买 nike

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com