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

Question

I am writing code with CSS and Bootstrap 4. I have made a background of gradient, but when I start adding other elements, such as images or text they appear to be basically invisible because of the gradient being on top of them. 我正在使用CSS和Bootstrap 4编写代码。我已经创建了渐变背景，但是当我开始添加其他元素（例如图像或文本）时，由于渐变位于它们之上，因此它们看起来基本上是不可见的。 Is there a solution? 有解决方案吗？

 .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

Try something like this: 尝试这样的事情：

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

As i understand your question, may be this will help you 据我了解您的问题，也许这会帮助您

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

问题描述

2 个解决方案

解决方案1
0 2018-10-09 11:57:38

解决方案2
-1 2018-10-09 12:02:08

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

问题描述

2 个解决方案

解决方案1 0 2018-10-09 11:57:38

解决方案2 -1 2018-10-09 12:02:08

解决方案1
0 2018-10-09 11:57:38

解决方案2
-1 2018-10-09 12:02:08