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

Question

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

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

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

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

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

Answer 1

Использование mix-blend-mode,

DEMO:

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

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

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;
}

Answer 2

Вот трюк:

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

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

Answer 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: ' ';
}