異なるdivの要素にCSSブレンドモードを適用できますか？

Question

異なるdivの要素にCSSブレンドモードを適用できますか？

例：1つのdivに大きな背景のヒーローイメージがあります。その画像の上（別のdiv内）に、テキストが入った青い半透明のボックスがあります。この透明なボックスはブレンドを適用したいものですが、例のように同じdivに含まれていない可能性があります。https://css-tricks.com/basics-css-blend-modes/

私はwordpressで作業しています。イメージとカラーボックスを同じdivに配置するためにHTMLを再構成するのは難しいです。

私はこの方法を達成するために使用できるトリックを誰かが知っていますか？

ありがとうございます！ここで

Answer 1

トリックです：

あなたは、単一のdivに両方のdivを追加することができます。 次にcssで1つのdivに2つの背景を追加できます。このように、background-blend-modeプロパティを使用して2つのイメージをブレンドすることができます。

ここでは例です：https://jsfiddle.net/4mgt8occ/3/

Answer 2

使用mix-blend-mode。

DEMO：

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

ブレンドモードを使用するには、2つの方法があります。

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