mask

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

関連情報