Как добавить фоновое изображение поверх предыдущего фонового изображения? - PullRequest
Новая
       39

Как добавить фоновое изображение поверх предыдущего фонового изображения?

0 голосов
/ 12 февраля 2019

У меня есть css-страница, которую я пишу, и мне нужно применить фоновое изображение в одном классе, а затем использовать другой класс, чтобы поместить частично прозрачное фоновое изображение поверх уже существующего.Это немного салата, поэтому позвольте мне продемонстрировать немного. 

html{
    <div class="background1">...</div>
    <div class="background1 backgroundFilter">...</div>
    <div class="background2">...</div>
    <div class="background2 backgroundFilter">...</div>
}
css {
    .background1 {
        background-image:url(...);
    }
    .background2 {
        background-image:url(...);
    }
    .backgroundFilter {
        background-image:url(...);
    }
}

В этом примере первый div должен иметь фоновое изображение 1, второй - фоновое изображение 1, но с фильтромЕсли изображение помещено поверх него, то третье должно быть изображением 2, а четвертое должно быть изображением 2 с тем же фильтром.

В этом примере, однако .backgroundFilter будет перезаписывать предыдущее изображение, а не накладывать его..

Возможно ли это или мне нужно создать разные классы для каждой версии фонового изображения?

1 Ответ

0 голосов
/ 12 февраля 2019

Вы можете рассмотреть переменные CSS.Укажите 2 фоновых слоя, которые вы можете изменить позже.Вы можете легко масштабировать до любого количества фона: 

.container > div {
  background:
    /*we make the default value a transparent image*/
    var(--im1,linear-gradient(transparent,transparent)),
    var(--im2,linear-gradient(transparent,transparent)); 
    
  height:200px;
  width:200px;
  display:inline-block;
}

.background1 {
  --im2: url(https://picsum.photos/200/300?image=0);
}

.background2 {
  --im2: url(https://picsum.photos/200/300?image=1069);
}

.backgroundFilter {
  --im1: linear-gradient(to right,transparent,green);;
}
<div class="container">
<div class="background1">...</div>
<div class="background1 backgroundFilter">...</div>
<div class="background2">...</div>
<div class="background2 backgroundFilter">...</div>
</div>

Вы также можете рассмотреть псевдоэлемент для нового фона, но вы ограничены только 3 фонами, так как у нас есть только 2 псевдоэлемента: 

.container > div { 
  height:200px;
  width:200px;
  display:inline-block;
  position:relative;
  z-index:0;
}

.background1 {  
  background: url(https://picsum.photos/200/300?image=0);
}

.background2 { 
  background: url(https://picsum.photos/200/300?image=1069);
}

.backgroundFilter::before {
  content:'';
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: linear-gradient(to right,transparent,green);;
}
<div class="container">
<div class="background1">...</div>
<div class="background1 backgroundFilter">...</div>
<div class="background2">...</div>
<div class="background2 backgroundFilter">...</div>
</div>
...