mask-position プロパティ
mask-position プロパティは、マスク加工においてマスク画像の位置を指定するための CSS プロパティです。
マスク加工に必要な画像または描写は mask-image プロパティを使用します。mask-image プロパティによるマスク画像の位置を mask-poisition によって指定します。
mask-image: url(img/test.png); mask-position: 0% 0%;
詳しくは Example を参照してください
上記の例は中心合わせになります。
mask プロパティによって、mask-image、mask-mode、mask-position、mask-size、mask-repeat、mask-origin、mask-clip、mask-composite の一括指定ができます。
制作上の注意点として、ローカルからの PNG などの画像ファイルの読み込みによるマスク加工はできません。サーバーからの読み込みの場合はできます。
コンテンツのくり抜き表示は clip-path や background-clip によってもできますが、合成はできません。合成も行うには mask を使用します。
ページ内 Index
構文(Syntax)
mask-position プロパティの構文についてです。
CSS
mask-position: <position> | top | bottom | left | right | center ;
DOM ( JavaScript )
object.style.maskPosition
object.style.maskPosition = " <position> | top | bottom | left | right | center "
mask-position プロパティの値は複数を指定することもできます。複数を指定する場合にはカンマ,
で区切ります。
値（Values）
以下は mask-position プロパティに指定できる値です。
| Value | 摘要 |
|---|---|
| <position> | 位置を示す１つ〜４つの値で構成。単位は CSS の長さの単位 または以下のキーワード。デフォルトは 0% 0%。 |
| Keyword | 摘要 |
|---|---|
| top | 上端に合わせる |
| bottom | 下端に合わせる |
| left | 左に合わせる |
| right | 右に合わせる |
| center | 中心に合わせる |
mask-position プロパティの値を複数指定する場合はスペースで区切ります。値が２つの場合は横方向と縦方向の組み合わせになります。
mask-position: center bottom;
この場合は、横方向には中心、縦方向には下端に合わせてマスク画像を表示します。
以下のグローバル値も指定できます。
| キーワード値 | 機能 |
|---|---|
| initial | 仕様で決められた設定値 |
| inherit | 親エレメントの設定値を継承 |
| revert | ブラウザで設定された値 |
| unset | 継承値が優先される。値が継承値されるプロパティでは inherit に同じ。継承されない場合は revert に同じ |
指定値を固定化する場合は !important 宣言を加えます。
備考（Remarks）
mask-position プロパティの備考についてです
| 初期値（Default value） | 0% 0% |
| 継承（Inherited） | no |
| 変化（Animatable） | Yes |
Example
mask-position プロパティの例です。mask-position プロパティはマスク画像の位置を指定します。
以下の例では、mask-position プロパティによる位置の変化が分かりやすいように mask-size:80%; に設定してあります。 位置を横方向は中心で、縦方向は下端に合わせています。
制作上の注意点としてマスク加工はサーバーからの読み込み（ http プロトコルであることが必要 ）でないと正常に機能しません。端末でのファイル読み込みではマスクによる表示はされません。
関連 CSS プロパティ
| プロパティ | 概要 |
|---|---|
| mask | 以下のプロパティを一括で指定 |
| mask-image | マスクに使用する画像または描写 |
| mask-mode | マスク加工を輝度またはアルファチャンネルに |
| mask-position | マスク画像の表示開始位置 |
| mask-size | マスク画像の大きさ |
| mask-repeat | マスク画像の繰り返し指定 |
| mask-origin | マスク加工処理の起点 |
| mask-clip | マスクの処理範囲 |
| mask-composite | 複数のマスクの合成方法 |