Блог

Можно ли применить режим наложения css к элементу в другом div?

Например, у меня есть большое фоновое изображение героя в одном div. Над этим изображением (в другом div) У меня есть синее полупрозрачное поле с текстом в нем. Я хотел бы применить смешивание к этому прозрачному блоку, но, похоже, это не работает, возможно, потому, что они не находятся в одном div, как в примере https://css-tricks.com/basics-css-blend-modes /

Я работаю в WordPress, поэтому будет немного сложно переструктурировать HTML, чтобы поместить изображение и цветное поле в один и тот же div.

Кто-нибудь знает трюк, который я могу использовать для достижения этого метода?

Заранее спасибо!

Используйте mix-blend-mode .

ДЕМОНСТРАЦИЯ:

http://plnkr.co/edit/R5TBohMs1jKfsPj7zcXt?p=preview

Есть два способа использования режимов наложения:

1. background-blend-mode : Если оба фона находятся в одном div, то это свойство можно использовать.

2. mix-blend-mode : Если вы хотите смешать фон из 2 разных элементов, тогда вы можете использовать mix-blend-mode свойство.

код:

HTML:

 <div class="wrapper">
  <div class="first"></div>
  <div class="second"></div>
</div>
  

CSS:

 div.wrapper {
  position: relative;
}
div.first,
div.second {
  width: 300px;
  height: 200px;
  position: absolute;
}
div.first {
  background: url(http://images.all-free-download.com/images/graphicthumb/male_lion_193754.jpg) 0 0 no-repeat;
  z-index: 9;
  top: 0px;
  left: 0px;
}
div.second {
  background: url(http://images.all-free-download.com/images/graphicthumb/canford_school_drive_dorset_514492.jpg) 0 0 no-repeat;
  z-index: 10;
  mix-blend-mode: difference;
  top: 30px;
  left: 120px;
}
  

Вот трюк:

вы можете добавить оба divs в один div. Затем в css вы можете добавить два фона для одного div. Таким образом, вы можете использовать background-blend-mode свойство для смешивания двух изображений.

Вот пример: https://jsfiddle.net/4mgt8occ/3 /

Вы можете использовать :after или :before для создания другого элемента в img-div. Затем установите цвет фона с rgba() помощью . 0.2 Здесь указана непрозрачность цвета фона. Для текстового div вам ничего не нужно с этим делать.

 div#wrapper::after {
    background-color: rgba(216, 223, 228, 0.2);
    display: block;
    width: 100%;
    height: 100%;
    content: ' ';
}