mask プロパティ
mask プロパティは、コンテンツをマスク加工するための CSS プロパティです。CSS におけるマスク加工は画像や動画、テキストなどのコンテンツに使用できます。
切り抜きや合成などのマスク加工を CSS で行うことができます。
制作上の注意点として、ローカルからの PNG などの画像ファイルの読み込みによるマスク加工はできません。サーバーからの画像の読み込みによるマスク加工はできます。
mask: url(img/test_alpha01.png) alpha ;
詳しくは Example を参照してください
仕様では mask プロパティは、mask-image、mask-mode、mask-position、mask-size、mask-repeat、mask-origin、mask-clip、mask-composite を一括指定することができるとあります。
各プロパティの値はスペース
で区切ります。
仕様では mask プロパティは一括で各プロパティが指定できるとありますがよく分かりませんでした。どのように指定すると想定通りに表示できるかは試してみる必要があります。
mask プロパティの値はカンマ,
で区切ることによって複数を指定することもできます。
CSS によるマスク加工は web ページ上で実行することができます。コンテンツをあとからマスク加工して表示するのに便利です。
コンテンツのくり抜き表示は clip-path や background-clip によってもできますが、合成はできません。合成も行うには mask を使用します。
ページ内 Index
構文(Syntax)
mask プロパティの構文についてです。
CSS
mask: mask-image mask-mode mask-position mask-size mask-repeat mask-origin mask-clip mask-composite ;
DOM ( JavaScript )
object.style.mask
object.style.mask = " mask-image mask-mode mask-position mask-size mask-repeat mask-origin mask-clip mask-composite "
mask-image プロパティの値は複数を指定することもできます。複数を指定する場合にはカンマ,
で区切ります。
値（Values）
以下は mask プロパティに指定できる値です。
| Value | 摘要 |
|---|---|
| mask-image | マスクに使用する画像または描写 |
| mask-mode | マスク加工を輝度またはアルファチャンネルで透過 |
| mask-position | マスク画像の表示開始位置 |
| mask-size | マスク画像の大きさ |
| mask-repeat | マスク画像の繰り返し指定 |
| mask-origin | マスク加工処理の起点 |
| mask-clip | マスクの処理範囲 |
| mask-composite | 複数のマスクの合成方法 |
以下のグローバル値も指定できます。
| キーワード値 | 機能 |
|---|---|
| initial | 仕様で決められた設定値 |
| inherit | 親エレメントの設定値を継承 |
| revert | ブラウザで設定された値 |
| unset | 継承値が優先される。値が継承値されるプロパティでは inherit に同じ。継承されない場合は revert に同じ |
指定値を固定化する場合は !important 宣言を加えます。
備考（Remarks）
mask プロパティの備考についてです
| 初期値（Default value） | none |
| 継承（Inherited） | no |
| 変化（Animatable） | mask-position、 mask-size |
Example
mask プロパティの例です。mask プロパティは、コンテンツをマスク処理するためのプロパティです。
仕様では mask プロパティは一括で各プロパティが指定できるとありますが想定通りに表示されませんでした。ブラウザによって指定方法が違うのかもしれません。
そのため、以下の例ではマスク画像と輝度またはアルファ値によるマスク方法の指定のみを行っています。その他の指定は各プロパティで設定したほうが無難なようです。
制作上の注意点として mask の画像はサーバーからの読み込み（ http プロトコルであることが必要 ）でないと正常に機能しません。端末でのファイル読み込みではマスクによる表示はされません。
関連 CSS プロパティ
| プロパティ | 概要 |
|---|---|
| mask | マスクに使用する画層の URL |
| mask-image | マスクに使用する画像または描写 |
| mask-mode | マスク加工を輝度またはアルファチャンネルに |
| mask-position | マスク画像の表示開始位置 |
| mask-size | マスク画像の大きさ |
| mask-repeat | マスク画像の繰り返し指定 |
| mask-origin | マスク加工処理の起点 |
| mask-clip | マスクの処理範囲 |
| mask-composite | 複数のマスクの合成方法 |