Сделать Div Mask Background Image для соответствия родительскому фоновому изображению - PullRequest
Новая
       12

Сделать Div Mask Background Image для соответствия родительскому фоновому изображению

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

Я пытаюсь добиться эффекта, когда похоже, что div «container» инвертирует фоновое изображение «родительского» div.Из моего исследования я не могу найти другого пути, кроме того, что «родитель» и «контейнер» имеют одинаковый размер с разными фонами, и «контент», маскирующий «контейнер».Вот изображение того, как я бы хотел, чтобы оно выглядело.

enter image description here

Вот мой HTML-код: 

<div class="parent">
  <div class="container">
    <div class="content">
    </div>
  </div>
</div>

«родительский» div имеет нормальный фон, а «контейнерный» div (такого же размера, что и «родительский») имеет инвертированную версию «родительского» фона (инвертирован с помощью сторонней программы, я не пытаюсь инвертировать его с помощью css).

Мой вопрос: какой CSS мне нужно применить к div "content" и "container", чтобы получить маску, в которой фон div "container" отображается только через div "content"?

Ответы [ 2 ]

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

Вы можете использовать mix-blend-mode, хотя это повлияет на любое содержимое .content div. 

.container {
  height: 300px;
  background: url(https://picsum.photos/1000/800?image2045) center/cover;
  padding: 50px;
}

.content {
  width: 220px;
  height: 180px;
  background: white;
  mix-blend-mode: difference;
  box-sizing: border-box;
}
<div class="container">
  <div class="content"></div>
</div>
0 голосов
/ 05 октября 2018

Идея состоит в том, чтобы поиграть с background-clip и настроить отступы, чтобы контролировать, сколько фона вы будете показывать из внутреннего контейнера: 

.container {
  height: 300px;
  background: url(https://picsum.photos/1000/800?image=1069) center/cover;
}

.content {
  height: 100%;
  background: url(https://picsum.photos/g/1000/800?image=1069) center/cover;
  background-clip: content-box;
  padding: 100px calc(100% - 300px) 100px 50px;
  box-sizing: border-box;
}
<div class="container">
  <div class="content">
    Some text
  </div>
</div>

Это также можно сделать с одним контейнером и несколькими фонами: 

.container {
 height:300px;
 background:
    url(https://picsum.photos/g/1000/800?image=1069) center/cover,
    url(https://picsum.photos/1000/800?image=1069) center/cover;
  background-clip:
    content-box,
    padding-box;
  padding:100px calc(100% - 300px) 100px 50px;
  box-sizing:border-box;
}
<div class="container">
    Some text
</div>
...