mask
====

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

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

構成要素のプロパティ
----------

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

* `mask-clip`
* `mask-composite`
* `mask-image`
* `mask-mode`
* `mask-origin`
* `mask-position`
* `mask-repeat`
* `mask-size`
構文
--


```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` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `mask-image`: `none`
* `mask-mode`: `match-source`
* `mask-repeat`: `repeat`
* `mask-position`: `center`
* `mask-clip`: `border-box`
* `mask-origin`: `border-box`
* `mask-size`: `auto`
* `mask-composite`: `add`
 |
| 適用対象 | すべての要素。 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-image`: 離散値
* `mask-mode`: 離散値
* `mask-repeat`: 離散値
* `mask-position`: 反復可能リスト
* `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 with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `clip-path`, `filter`
* CSS Shapes, clipping and masking – and how to use them
* HTML コンテンツへ SVG 効果を適用する
* SVG