0

css ブレンド モードを別の div の要素に適用することは可能ですか?

たとえば、1 つの div に大きな背景のヒーロー画像があります。その画像の上 (別の div 内) に、テキストが入った青い半透明のボックスがあります。この透明なボックスにブレンドを適用したいのですが、例https://css-tricks.com/basics-css-blend-のように、同じ div にないため、おそらく機能しないようです。モード/

私はワードプレスで作業しているので、画像と色付きのボックスを同じ div に配置するために HTML を再構築するのは少し難しいでしょう。

この方法を実現するために使用できるトリックを知っている人はいますか?

前もって感謝します！

ここに画像の説明を入力

4

3 に答える 3

1

を使用しmix-blend-modeます。

デモ：

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;
}
于 2016-10-18T04:40:35.643 に答える
0

ここにトリックがあります：

両方の div を 1 つの div に追加できます。次にcssで、単一のdivに2つの背景を追加できます。このように、background-blend-modeプロパティを使用して 2 つの画像をブレンドできます。

例を次に示します: https://jsfiddle.net/4mgt8occ/3/

于 2016-10-18T04:30:14.063 に答える