mask-origin プロパティ
mask-origin プロパティは、マスク加工処理の起点を指定するための CSS プロパティです。キーワードで指定した表示領域の左上端がマスク加工の起点になります。
マスク加工は margin、 border、padding、コンテンツ内容、全体、outline といった余白や罫線、内容の表示領域ごとに指定します。それぞれの左端上が起点となりますが、マスク加工の処理範囲は border 領域以下になります。
mask-image: url(img/test.png); mask-origin: content-box;
詳しくは Example を参照してください
マスク加工の処理範囲はデフォルトでは border 領域以下になるために mask-origin プロパティによる変化がないように見える場合もあります。
マスク加工の処理範囲を変更するには mask-clip プロパティを使用します。mask-clip プロパティはマスク加工の処理範囲を margin、 border、padding、コンテンツ内容、全体、outline に変更することができます。
mask プロパティによって、mask-image、mask-mode、mask-position、mask-size、mask-repeat、mask-origin、mask-clip、mask-composite の一括指定ができます。
ページ内 Index
構文(Syntax)
mask-origin プロパティの構文についてです。
CSS
mask-origin: [ border-box | content-box | padding-box | margin-box | fill-box | stroke-box | view-box ] ;
DOM ( JavaScript )
object.style.maskOrigin
object.style.maskOrigin = " [ border-box | content-box | padding-box | margin-box | fill-box | stroke-box | view-box ] ";
mask-origin プロパティの値は複数を指定することもできます。複数を指定する場合にはカンマ,
で区切ります。
値（Values）
以下は mask-origin プロパティに指定できる値には以下があります。
| Value | 摘要 |
|---|---|
| border-box | デフォルト。border の表示領域の左上端がマスク加工の起点。加工範囲はデフォルトで border の表示領域以内 |
| content-box | 内容の表示領域の左上端がマスク加工の起点。デフォルトで border の表示領域も加工範囲に入る |
| padding-box | padding の表示領域の左上端がマスク加工の起点。デフォルトで border の表示領域も加工範囲に入る |
| margin-box | margin の表示領域の左上端がマスク加工の起点。加工の範囲はデフォルトで border 以内になる |
| fill-box | エレメントの表示領域全体の左上端がマスク加工の起点。加工の範囲はデフォルトで border 以内になる |
| stroke-box | outline の表示領域の左上端がマスク加工の起点。加工の範囲はデフォルトで border 以内になる |
| view-box | SVG データのマスク加工の起点に合わせる |
マスク加工の処理範囲を変更するには mask-clip プロパティを使用します。mask-clip プロパティはマスク加工の処理範囲を margin、 border、padding、コンテンツ内容、全体、outline に変更することができます。
以下のグローバル値も指定できます。
| キーワード値 | 機能 |
|---|---|
| initial | 仕様で決められた設定値 |
| inherit | 親エレメントの設定値を継承 |
| revert | ブラウザで設定された値 |
| unset | 継承値が優先される。値が継承値されるプロパティでは inherit に同じ。継承されない場合は revert に同じ |
指定値を固定化する場合は !important 宣言を加えます。
備考（Remarks）
mask-origin プロパティの備考についてです
| 初期値（Default value） | border-box |
| 継承（Inherited） | no |
| 変化（Animatable） | no |
Example
mask-origin プロパティの例です。mask-origin プロパティは、マスク加工処理の起点が変更できます。デフォルトは border 領域の左上端からで、margin、padding、コンテンツ内容、全体、outline と変更することができます。
以下の例では、マスク画像の繰り返しを多くし mask-origin プロパティの起点の変化が分かりやすいようにしています。mask-size プロパティを 10% に指定し、マスク画像は 40% で透過するようにしています。
マスク加工の起点が変化してもマスク加工処理がされる範囲は border の表示領域以内に依存するために変化がないようにみえるかもしれません。
マスク加工の処理範囲を変更するには mask-clip プロパティを使用します。mask-clip プロパティはマスク加工の処理範囲を margin、 border、padding、コンテンツ内容、全体、outline に変更することができます。
制作上の注意点としてマスク加工はサーバーからの読み込み（ http プロトコルであることが必要 ）でないと正常に機能しません。端末でのファイル読み込みではマスクによる表示はされません。
関連 CSS プロパティ
| プロパティ | 概要 |
|---|---|
| mask | 以下のプロパティを一括で指定 |
| mask-image | マスクに使用する画像または描写 |
| mask-mode | マスク加工を輝度またはアルファチャンネルに |
| mask-position | マスク画像の表示開始位置 |
| mask-size | マスク画像の大きさ |
| mask-repeat | マスク画像の繰り返し指定 |
| mask-origin | マスク加工処理の起点 |
| mask-clip | マスクの処理範囲 |
| mask-composite | 複数のマスクの合成方法 |