maskプロパティ

プロパティmaskは、すべてのマスキングプロパティの一括指定であり、以下を設定できます： マスク画像、その位置、サイズ、ブレンドモード、その他のパラメータ。

以下のプロパティの一括指定です： mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite。

構文

値

値	説明
none	マスキングを無効にする（デフォルト値）
url()	マスク画像へのパス（SVG、PNG）
linear-gradient()	マスクとしての線形グラデーション
radial-gradient()	マスクとしての放射状グラデーション
position	マスクの位置（top、center、50% 50%など）
size	マスクのサイズ（cover、contain、100px 50px）
repeat	マスクの繰り返し（no-repeat、repeat-x、space）
mode	ブレンドモード（alpha、luminance、match-source）
composite	マスクの合成（add、subtract、intersect、exclude）

画像の準備

切り取る自然の画像と、切り抜きに使用するハートと矢印のSVG画像があるとします：

:

例 . 画像マスク

ハート型マスクを画像に適用してみましょう：

:

例 . マスクの位置

左上のハート型マスク：

:

例 . マスクの位置

右下のハート型マスク：

:

例 . マスクの位置

左中央のハート型マスク：

:

例 . マスクの位置

中央のハート型マスク：

:

例 . マスクの位置

左から100px、上から200pxのハート型マスク：

:

例 . マスクサイズ cover

値coverは、マスクを要素を完全に覆うように拡大縮小し、アスペクト比を保持します。 アスペクト比が一致しない場合、マスクの端を切り取る可能性があります：

:

例 . マスクサイズ contain

値containは、マスクを要素内全体に収まるように拡大縮小し、 アスペクト比を保持します。空の領域が残る可能性があります：

:

例 . マスクサイズ

固定サイズはマスクの正確な寸法を設定します。 例えば、マスクサイズを50pxにしてみましょう：

:

例 . 繰り返し no-repeat

値no-repeatはマスクの繰り返しを無効にします。 マスクは指定された位置に一度だけ表示されます：

:

例 . 繰り返し repeat-x

値repeat-xは、水平軸のみでマスクを繰り返します：

:

例 . 合成 add

値addは複数のマスクを加算します（結果はすべてのマスクの和集合）：

:

例 . 合成 intersect

値intersectは、マスクの交差領域のみを表示します：

:

例 . 合成 exclude

値excludeは、交差していないマスクの領域を表示します：

:

例 . 合成 subtract

値subtractは、最初のマスクから2番目のマスクを減算します。 例として、1つのハートを作り、そこから矢印を引き算してみましょう：

:

例 . maskの詳細な記述

個別の構成プロパティで記述されたmaskプロパティ：

:

例 . 画像用SVG

画像用のマスクとしてSVG要素を使用する：

:

例 . グラデーション用SVG

グラデーション用のマスクとしてSVG要素を使用する：

:

関連項目