4

同じブレンド モードを使用している場合でも、mix-blend-mode使用する場合と使用する場合では結果が異なることに気付きました。background-blend-mode

たとえば、以下の 2 つの結果を比較してください。

background-blend-mode を使用した画像 mix-blend-modeの画像

以下のセットアップと JSFiddles をコピーしました。

HTML

<div class="background">
  <div class="overlay"></div>
</div>

CSS

.background{
  width:200px;
  height:200px;
  //background-color:green; //toggle depending on what you want to use
  background-blend-mode:soft-light;
  background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
  background-size:cover;
}

.overlay{
  width:100%;
  height:100%;
  background-color:green; //toggle depending on what you want to use
  mix-blend-mode:soft-light;
}

JSFiddle

mix-blend-mode の使用: https://jsfiddle.net/p8gkna87/

background-blend-mode の使用: https://jsfiddle.net/p8gkna87/1/

いくつかの背景情報

私は現在、ソフトライト ブレンディング モードを使用し、同時に 51% の不透明度を使用する Photoshop のデザインを複製しています。したがってbackground-blend-mode、不透明度を同じオブジェクトに適用できないため、使用できません。

4

3 に答える 3

3

LGSon からすでに適切な回答が得られています。

もう少し明確にするために：

ここにあるレイヤーは、下から上に向かって次のとおりです。

  1. 背景要素の背景色
  2. 背景要素画像
  3. オーバーレイ要素の背景色

background-blendmode は背景要素の内部に適用されます。この場合、レイヤー 1 の上にレイヤー 2 が適用されます。

mix-blend-mode は、要素 3 を 1 + 2 の結果に適用します。

したがって、そのうちの 1 つだけが有効な場合、順序は逆になります。

于 2016-12-13T22:12:22.120 に答える