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

Question

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

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

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

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

Заранее благодарен!

Answer 1

Вот трюк:

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

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

Answer 2

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

DEMO:

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

Есть два способа использовать Blend-режимы:

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

2. mix-blend-mode: Если вы хотите наложить фон из двух разных элементов, вы можете использовать свойство 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 3

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

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