0

私は次のCSSコードを持っています:

div {
  background: url('image-url'), linear-gradient(gradient), url('image-url-2');
  background-blend-mode: blend-mode-1, blend-mode-2;
}

グラデーションまたは URL 背景の位置は変更できます。それはブレンドの順序に何らかの影響を与えるはずだと思います。私の質問は、これらのモードをどのように適用して最終値を計算するのですか?

ブラウザは最初に適用blend-mode-1しurl('image-url')、linear-gradient(gradient)後でblend-mode-2最初の結果に適用しますか、url('image-url-2')それともその逆ですか?

正しい数の background-blend-mode を使用していますか、それとも 3 つ指定する必要がありますか?

4

1 に答える 1

1

ここでは、背景画像の積み重ね順序が重要な要素です。

背景画像は逆の順序でスタックされ、リストの最初の画像がレンダリング スタックの最上位になります。

ブレンドモードは、背景に適用されるカンマ区切りのプロパティとして適用されます。最初のプロパティは最初の画像に、2 番目のプロパティは 2 番目の画像に、というように適用されます。

あなたの例では

div {
  background: url('image-url'), linear-gradient(gradient), url('image-url-2');
  background-blend-mode: blend-mode-1, blend-mode-2;
}

url2 は一番下にあります。

その上に、blend-mode-2 が適用されたグラデーションがあります。

そしてその上に、blend-mode-1 の image-url があります。

3 番目の background-blend-mode を設定できます。この場合、 image-url-2 と background-color の間のブレンドに適用されます(例では設定していませんが、設定することはできます)

于 2016-02-28T09:21:37.553 に答える