CSS3 分離を理解する: isolate_html/css_WEB-ITnose のパフォーマンスと機能

1. 分離について

分離は、名前が「分離」を意味するように、サポートされる値を継承することに加えて、 include auto と isolate です。

継承については特に言うことはありません。 Auto は実際には何もしないことを意味し、要素のデフォルト値です。したがって、isolation: isolate ステートメントについてのみ注意する必要があります。

分離: 意味論と同じように、分離は分離を意味します。では、分離とは何でしょうか?本来の意味は、ミックスブレンドモード要素の混合を分離することです。

mix-blend-mode ミキシングモードについては、以前の記事「CSS3 ミキシングモード mix-blend-mode 入門」を参照してください。

ブレンド モードが要素に適用されると、デフォルトでは、Z 軸上での積み重ね順序よりも低い積み重ね順序ですべての積み重ねられた要素がブレンドされます。

しかし、場合によっては、ブレンド モードを特定の要素、または特定の要素グループにのみ適用したい場合はどうすればよいでしょうか? isolation: この問題を解決するために、isolate が作成されました。

ここをクリックできます: 分離: 分離機能のデモデモ

次の CSS および HTML 構造:

.box {    background-color: #0074D9;}.inner {    width: 256px;    height: 256px;    background: url(mm1.jpg) no-repeat;    }.mode {    position: relative;    right: -100px;    mix-blend-mode: darken;	}

<div class="box">    ><div class="inner">        ><img  class="mode lazy"  src="/static/imghwm/default1.png"  data-src="mm2.jpg"  alt="CSS3 分離を理解する: isolate_html/css_WEB-ITnose のパフォーマンスと機能" >    ></div>></div>

この時点では、mm2 の垂直女の子は mm1 Hen 女の子と混合されるだけでなく、青色の背景色とも混合されます。

では、2 つの写真だけを混合するという効果を実現したいのですが、このときどうすればよいでしょうか。

この時点で、isolation:isolate を使用してブロックし、混合グループを形成できます。グループ外の要素はカスケードされません。

そこで、例えばデモページのボタンをクリックして、.innerレイヤーのdiv要素にisolation:isolateを追加すると、縦長の女の子mm2が青と混ざらないことがわかります。以下のスクリーンショットに示す背景色:

2. 分離:分離の原理

分離:分離が混合モードをブロックできる理由は、基本的に分離:分離であるためです。新しいカスケード コンテキスト (スタッキング コンテキスト) を作成します。

はい、新しいカスケード コンテキストが作成されるという理由だけで機能します。それ自体は特別なことをするわけではありません。または、大胆にこう言うこともできます。「Isolation:isolate は、カスケード コンテキストを作成すること以外には役に立ちません!

あなたの言うとおり、カスケード コンテキストを作成できる属性ではないのかと疑問に思う人もいるかもしれません。コンテキスト ミックスブレンドモードの効果をブロックできますか?

はい、それだけです!

要素がカスケード コンテキストを作成できる限り、mix-blend-mode はブロックできます。

したがって、isolation:isolate だけでなく、次のことも可能です:

1. Position:relative /position: auto 以外の z-index 値を持つ絶対位置の要素。
2. Position:fixed、Chrome ブラウザーのみ。他のブラウザーは以前のものに従い、z-index を数値にする必要があります。
3. z-index 値が auto ではないフレックス項目 (親要素 display:flex|inline-flex)
4. 要素の不透明度の値が 1 ではありません。
5. 要素の変換 値が none ではありません。
6. mix-blend-mode 要素の値が正常ではありません。
7. 要素のフィルター値が none ではありません。 >
will-change で指定する属性値は上記のいずれかです。
9. 要素の -webkit-overflow-scrolling は touch に設定されています。

ここをクリックしてください: カスケード コンテキストと混合モードのブロック テスト デモ。

任意のカスケード コンテキストを選択すると、誰もが mix-blend-mode に対する障壁を感じることができます。例:

3.background-blend-mode について

ブレンディング モードの分野におけるもう 1 つの重要なプレーヤーは、background-blend-mode (背景ブレンディング モード) です。この CSS プロパティは、isolation:isolate でブロックする必要がありますか?答えはノーです。 background-blend-mode は本質的に閉じたブレンディング フィールドであり、他の要素には影響を与えません。

上~

4. 結論

この観点から見ると、CSS3 はいくつかのプレゼンテーション層のものを追加するだけでなく、カスケード コンテキストなどの概念もより厚くなります。その背後に絡み合う関係は想像以上に複雑ですが、それらは相互検証のシステムでもあります。

CSS を学ぶにはまだまだ長い道のりがあります。

この記事はスクリプトの動作を含むオリジナルの記事であり、ナレッジポイントは頻繁に更新され、いくつかの間違いは修正されます。そのため、転載する際は元のソースを保持してください。トレーサビリティを確保し、古い知識や誤った知識による誤解を避けると同時に、より良い読書体験を提供します。

この記事の URL: http://www.zhangxinxu.com/wordpress/?p=5155

(この記事はここまで)

関連記事

• CSS3 mix-blend-mode/background-blend-mode 入門 (1.000)