Исключить некоторую часть из режима наложения фона - PullRequest
Новая
       89

Исключить некоторую часть из режима наложения фона

0 голосов
/ 28 августа 2018

Я пытаюсь добиться эффекта, похожего на умножение Photoshop, используя код моего проекта. В то же время я пытаюсь исключить некоторые элементы, которые находятся в дочернем элементе div (например, текстовые слои), и ударил в стену. Попытка уже добавить дополнительные элементы div, устанавливающие различные z-index или перейти с абсолютной позиции.

Здесь Вы можете найти ручку с примером проблемы:

HTML 

<div class="main">
  <div class="inner">
    <h1>Some header</h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia eligendi est eius unde autem dolore adipisci perspiciatis laboriosam reiciendis placeat! Eveniet, quam? Vitae sit saepe quam delectus fugiat, dolores necessitatibus.</p>
  </div>
</div>

CSS 

.inner {
  text-align: center;
  padding: 50px 0;
  background: #0079ff;
     mix-blend-mode: multiply;
    backface-visibility: hidden;
  color: white;
}

.main {
  background-repeat: no-repeat;
  background-image: url('https://preview.ibb.co/fMY2f9/Bg1.jpg');
  background-size: cover;
}

Краткое описание: Дочерние элементы 'child div' подвержены умножению. Есть ли способ предотвратить это?

Скриншоты:

Multiply has been applied but it also affect text layers.

enter image description here

1 Ответ

0 голосов
/ 28 августа 2018

Используйте псевдоэлемент для фона, чтобы избежать этого: 

.inner {
  text-align: center;
  padding: 50px 0;
  color: white;
}

.main {
  background-repeat: no-repeat;
  background-image: url('https://preview.ibb.co/fMY2f9/Bg1.jpg');
  background-size: cover;
  position: relative;
  z-index: 0;
}

.main::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0079ff;
  mix-blend-mode: multiply;
}
<div class="main">
  <div class="inner">
    <h1>Some header</h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia eligendi est eius unde autem dolore adipisci perspiciatis laboriosam reiciendis placeat! Eveniet, quam? Vitae sit saepe quam delectus fugiat, dolores necessitatibus.</p>
  </div>
</div>
...