линейно-градиентный фон перезаписывает другие элементы (например, img или текст) - PullRequest
Новая
       3

линейно-градиентный фон перезаписывает другие элементы (например, img или текст)

0 голосов
/ 09 октября 2018

Я пишу код с помощью 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>

Ответы [ 2 ]

0 голосов
/ 09 октября 2018 

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

Как я понимаю ваш вопрос, может быть, это поможет вам

0 голосов
/ 09 октября 2018

Попробуйте что-то вроде этого: 

<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;
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...