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.

maskCSS一括指定プロパティで、指定された位置での画像のマスクまたは切り取りによって要素を (部分的または全体的に) 隠します。

メモ: 以下のプロパティに加えて、mask 一括指定は mask-border を初期値にリセットします。そのため、カスケード内の初期のマスク設定を上書きするには、他の一括指定や個々のプロパティではなく、mask 一括指定を使用することをお勧めします。これにより、mask-border もリセットされ、新しいスタイルが適用されるようになります。

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

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-originmask-clip の両方が設定されます。2 つの <geometry-box> 値が存在する場合、1 つ目値は mask-origin を設定し、2 つ目の値は mask-clip を設定します。

<geometry-box> | no-clip

マスク画像の影響を受ける範囲を設定します。 mask-clip を参照してください。

<compositing-operator>

現在のマスクレイヤーに使用する合成操作を設定します。 mask-composite を参照してください。

公式定義

初期値一括指定の次の各プロパティとして
適用対象すべての要素。 SVG の場合は defs 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される
継承なし
パーセント値一括指定の次の各プロパティとして
  • mask-position: マスク描画領域の寸法からマスクレイヤー画像の寸法を引いたものに対する相対値 (background-position のテキストを参照)
計算値一括指定の次の各プロパティとして
  • mask-image: 指定通り、ただし url の値は絶対パスになる
  • mask-mode: 指定通り
  • mask-repeat: 2 つのキーワードから成り、方向ごとに 1 つずつ
  • mask-position: 原点を表す 2 つのキーワードと、その原点からの 2 つのオフセットで、それぞれが絶対的な長さ (<length> が指定された場合) またはパーセント値で指定される。
  • mask-clip: 指定通り
  • mask-origin: 指定通り
  • mask-size: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
  • mask-composite: 指定通り
アニメーションの種類一括指定の次の各プロパティとして
重ね合わせコンテキストの生成あり

形式文法

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>* )

画像のマスク

css
.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

関連情報