mask
Baseline 2023
Newly available
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
mask
は CSS の一括指定プロパティで、指定された位置での画像のマスクまたは切り取りによって要素を (部分的または全体的に) 隠します。
メモ: 以下のプロパティに加えて、mask
一括指定は mask-border
を初期値にリセットします。そのため、カスケード内の初期のマスク設定を上書きするには、他の一括指定や個々のプロパティではなく、mask
一括指定を使用することをお勧めします。これにより、mask-border
もリセットされ、新しいスタイルが適用されるようになります。
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
/* キーワード値 */
mask: none;
/* 画像値 */
mask: url(mask.png); /* マスクとして使用されるピクセル画像 */
mask: url(masks.svg#star); /* マスクとして使用されるSVGグラフィック内の要素 */
/* 組み合わせ値 */
mask: url(masks.svg#star) luminance; /* 輝度マスクとして使用される SVG グラフィック内の要素 */
mask: url(masks.svg#star) 40px 20px; /* マスクとして使用される SVG グラフィック内の要素が、上から 40px、左から 20px の位置に配置されている */
mask: url(masks.svg#star) 0 0/50px 50px; /* 幅と高さが 50px のマスクとして使用される SVG グラフィック内の要素 */
mask: url(masks.svg#star) repeat-x; /* 水平方向に繰り返されるマスクとして使用される SVG グラフィック内の要素 */
mask: url(masks.svg#star) stroke-box; /* ストロークで囲まれたボックスに拡張するマスクとして使用される SVG グラフィック内の要素 */
mask: url(masks.svg#star) exclude; /* SVGグラフィック内の要素をマスクとして使用し、非重複部分を使用して背景と組み合わせる */
/* グローバル値 */
mask: inherit;
mask: initial;
mask: revert;
mask: unset;
/* 複数のマスク */
mask:
url(masks.svg#star) left / 16px repeat-y,
/* SVG グラフィック内の要素が、幅 16px の左端のマスクとして使用されている */
url(masks.svg#circle) right / 16px repeat-y; /* SVG グラフィック内の要素が、幅 16px の右端のマスクとして使用されている */
値
<mask-reference>
-
マスク画像のソースを設定します。
mask-image
を参照してください。 <masking-mode>
-
マスク画像のマスクモードを設定します。
mask-mode
を参照してください。 <position>
-
マスク画像の位置を設定します。
mask-position
を参照してください。 <bg-size>
-
マスク画像の大きさを設定します。
mask-size
を参照してください。 <repeat-style>
-
マスク画像の反復を設定します。
mask-repeat
を参照してください。 <geometry-box>
-
<geometry-box>
値が 1 つのみが与えられた場合は、mask-origin
とmask-clip
の両方が設定されます。2 つの<geometry-box>
値が存在する場合、1 つ目値はmask-origin
を設定し、2 つ目の値はmask-clip
を設定します。 <geometry-box> | no-clip
-
マスク画像の影響を受ける範囲を設定します。
mask-clip
を参照してください。 <compositing-operator>
-
現在のマスクレイヤーに使用する合成操作を設定します。
mask-composite
を参照してください。
公式定義
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | すべての要素。 SVG の場合は defs 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
継承 | なし |
パーセント値 | 一括指定の次の各プロパティとして
|
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 一括指定の次の各プロパティとして
|
重ね合わせコンテキストの生成 | あり |
形式文法
mask =
<mask-layer>#
<mask-layer> =
<mask-reference> ||
<position> [ / <bg-size> ]? ||
<repeat-style> ||
<geometry-box> ||
[ <geometry-box> | no-clip ] ||
<compositing-operator> ||
<masking-mode>
<mask-reference> =
none |
<image> |
<mask-source>
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<bg-size> =
[ <length-percentage [0,∞]> | auto ]{1,2} |
cover |
contain
<repeat-style> =
repeat-x |
repeat-y |
[ repeat | space | round | no-repeat ]{1,2}
<geometry-box> =
<shape-box> |
fill-box |
stroke-box |
view-box
<compositing-operator> =
add |
subtract |
intersect |
exclude
<masking-mode> =
alpha |
luminance |
match-source
<image> =
<url> |
<gradient>
<mask-source> =
<url>
<length-percentage> =
<length> |
<percentage>
<shape-box> =
<visual-box> |
margin-box
<url> =
<url()> |
<src()>
<visual-box> =
content-box |
padding-box |
border-box
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
例
画像のマスク
.target {
mask: url(#c1) luminance;
}
.anothertarget {
mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
}
仕様書
Specification |
---|
CSS Masking Module Level 1 # the-mask |
ブラウザーの互換性
BCD tables only load in the browser