CSS ブレンドモード

前の言葉

コンテキスト z-index を積み重ねることは、どちらがユーザーに近いかをカバーする 2 つの要素の問題を解決するだけです。 CSS ブレンド モードは、2 つの要素のカバー部分をどのようにブレンドするかという問題を扱います。 Photoshop を知っている場合は、この現象に精通しているはずです。 CSS3 には、ミックス モードに関連する 2 つのプロパティがあります。mix-blend-mode と background-blend-mode です。この記事では、CSS ミックス モードについて詳しく紹介しますmix-blend-mode和background-blend-mode，本文将详细介绍CSS混合模式

 

元素混合

  元素混合mix-blend-mode应用于两个元素之间的混合

mix-blend-mode

初始值: normal

应用于: 所有元素

继承性: 无

值: normal(正常) | multiply(正片叠底) | screen(滤色) | overlay(叠加) | darken(变暗) | lighten(变亮) | color-dodge(颜色减淡) | color-burn(颜色加深) | hard-light(强光) | soft-light(柔光) | difference(差值) | exclusion(排除) | hue(色相) | saturation(饱和度) | color(颜色) | luminosity
(亮度) | initial(初始) | inherit(继承) | unset(复原)

兼容性: IE浏览器、android4.4-不支持，safari和IOS需要添加-webkit-前缀

  [注意]该元素会创建层叠上下文，z-index属性有效

背景混合

  背景混合background-blend-mode应用于一个元素的多背景图或背景图与背景颜色之间的混合

background-blend-mode

初始值: normal

应用于: 所有元素

继承性: 无

值: normal(正常) | multiply(正片叠底) | screen(滤色) | overlay(叠加) | darken(变暗) | lighten(变亮) | color-dodge(颜色减淡) | color-burn(颜色加深) | hard-light(强光) | soft-light(柔光) | difference(差值) | exclusion(排除) | hue(色相) | saturation(饱和度) | color(颜色) | luminosity
(亮度) | initial(初始) | inherit(继承) | unset(复原)

兼容性: IE浏览器、android4.4-不支持，safari和IOS需要添加-webkit-前缀

 

隔离

  隔离isolation的作用是创建一个堆叠上下文stacking context，主要用于与mix-blend-mode属性一起使用时，将混合模式只应用于某一个元素或某一组元素

isolation

初始值: auto

应用于: 所有元素

继承性: 无

值: auto | isolate(创建新的堆叠上下文) | initial | inherit | unset

<style>
body{background-color: gray;}
.test1,.test2{display: inline-block;width: 100px;height: 100px;border:1px solid black;}
.test2{isolation: isolate;}
.in{width: 50px;height: 50px;background-color: red;mix-blend-mode: screen;}
</style>


<p>
    </p><p></p>

<p>
    </p><p></p>

  如果不使用isolation: isolate创建堆叠上下文，由于.test1和.test2背景颜色透明，则.in会和背景颜色混合，成为粉色。使用isolation: isolate后，.test2从中隔离出来，不与的背景进行混合，从而保留其原先的红色

      由于isolation: isolate

。要素ミックス

要素ミックス mix-blend-mode は 2 つの要素間のミックスに適用されます

mix-blend-mode

初期値：normal

適用対象：すべての要素🎜 🎜継承: なし 🎜🎜 値: 乗算 (乗算) スクリーン (カラー フィルター) | 明るくする (カラー) | | 焼き込み (色の濃さ) | ソフトライト (差分) | 彩度 (色相) |明るさ) | 継承(継承) | unset(復元)🎜🎜 互換性: IE ブラウザ、android4.4 はサポートされていません、safari と IOS は -webkit- プレフィックスを追加する必要があります 🎜🎜 [注意] この要素はカスケードコンテキスト、および z-index 属性が有効です🎜

背景ブレンド

🎜 背景ブレンドのbackground-blend-modeは、複数の背景画像、または背景画像と要素の背景色に適用されます。強い>背景ブレンドモード🎜🎜適用対象:すべての要素🎜🎜継承:なし🎜🎜値:normal(normal) ) 画面を暗くする | | 色-焼き込み | 色相 (色相) | 色相 (色相)明るさ) | 継承 (継承) | 設定解除 (復元)🎜🎜 互換性: IE ブラウザー、android4.4 はサポートされていません、safari および IOS には -webkit- プレフィックスを追加する必要があります🎜🎜 🎜

Isolation🎜 分離の機能は、スタックを作成することです。コンテキスト スタッキング コンテキストは、主に mix-blend-mode 属性とともに使用される場合に使用され、特定の要素または特定の要素グループにのみブレンド モードを適用します🎜🎜分離🎜🎜 初期値: auto🎜 適用対象: すべての要素 🎜🎜 継承: なし 🎜🎜 値: auto | isolate (新しいスタックコンテキストを作成) | unset🎜rrreee🎜 .test1 と .test2 の背景色は透明であるため、 isolation: isolate を使用してスタッキング コンテキストを作成します。 /code> は の背景色と同じになります。 混ぜるとピンクになります。 isolation: isolate を使用すると、.test2 は から分離され、 とは関係なくなります。 code> >元の赤色を維持するために背景が混合されます🎜🎜 isolation: isolate の機能はスタッキング コンテキストを作成することなので、スタッキング コンテキストが作成できる限り、分離効果は可能です。したがって、同様に、相対、フィルタ、その他のスタイルでも同様の効果を実現できます🎜🎜CSS 混合モード関連の記事については、PHP 中国語 Web サイトに注目してください。 🎜🎜🎜🎜🎜🎜🎜