CSS マスク

CSS マスクモジュールは、視覚的要素の一部または全体を非表示にするために使用される 2 つの異なるグラフィック操作、マスクとクリップを定義します。

クリップでは、閉じたベクトルのパス、シェイプ、多角形をクリップパスとして定義します。クリップパス領域内のものはすべて表示されたままですが、領域外のものはすべて非表示、つまり「クリップアウト」されます。 clip-path プロパティは、クリップパスとして使用する <basic-shape> を指定するか、SVG <clipPath> 要素を参照します。

CSS マスクプロパティは、要素またはその境界線にマスクを適用するために使用されます。その後、グラフィックオブジェクトが背景または境界線に描画され、マスクの不透明度または輝度に応じて、要素またはその境界線の一部が完全にまたは部分的にマスクされます。

マスクとして使用される画像は、 mask-image または mask-border-source プロパティで指定します。指定したマスクは、<image>、<gradient>、または SVG の <mask> 要素にすることができます。マスクは、背景画像や境界画像と同様に、サイズや位置を指定することができます。

CSS でのクリップとマスクは、SVG と同じ方法で動作します。まず、要素はフィルター効果、マスク、クリップ、不透明度なしでスタイル設定されます。次に、フィルター効果、クリップ、マスク、不透明度の順で、要素にすべての効果が適用されます。

マスクはより詳細な制御とオプションを提供しますが、必要なものが基本的な形状だけである場合は、クリップの方がより優れたパフォーマンスを発揮します。