mask-originプロパティは、マスク適用の基準位置を指定する際に使用します。
■値
- content-box
- コンテントボックスに対して相対的に基準位置が決まる
- padding-box
- パディングボックスに対して相対的に基準位置が決まる（単一のボックスの場合、0 0 はパディングエッジの左上端、100% 100% は右下端となる）
- border-box
- ボーダーボックスに対して相対的に基準位置が決まる（初期値）
- margin-box
- マージンボックスに対して相対的に基準位置が決まる
- fill-box
- オブジェクト境界ボックスに対して相対的に基準位置が決まる
- stroke-box
- ストローク境界ボックスに対して相対的に基準位置が決まる
- view-box
- 直近のSVGビューポートが参照ボックスとして利用される
■初期値・適用対象・値の継承
- 初期値
- border-box
- 適用対象
- すべての要素。 SVGでは、defs要素とすべてのグラフィックス要素を除くコンテナ要素に適用される
- 値の継承
- しない
■使用例
CSSソースは外部ファイル（sample.css）に記述
.sample0, .sample1, .sample2, .sample3, .sample4, .sample5, .sample6, .sample7, .sample8 {
width:80px; height:40px;
margin:10px; padding:10px;
background-color: pink;
border: 30px solid red;
}
div.sample1 {
mask-image: url(‘images/maru20.png’);
mask-origin: content-box;
}
div.sample2 {
mask-image: url(‘images/maru20.png’);
mask-origin: padding-box;
}
div.sample3 {
mask-image: url(‘images/maru20.png’);
mask-origin: border-box;
}
div.sample4 {
mask-image: url(‘images/maru20.png’);
mask-origin: margin-box;
}
div.sample5 {
mask-image: url(‘images/maru20.png’);
mask-origin: fill-box;
}
div.sample6 {
mask-image: url(‘images/maru20.png’);
mask-origin: stroke-box;
}
div.sample7 {
mask-image: url(‘images/maru20.png’);
mask-origin: view-box;
}
HTMLソース
<p>
マスクを指定しない状態のdiv要素<br>
<div class=”sample0″></div>
</p>
<p>
マスクレイヤーとして使用する画像<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/maru20.png”>
</p>
<p>
mask-origin: content-box; を指定<br>
<div class=”sample1″></div>
</p>
<p>
mask-origin: padding-box; を指定<br>
<div class=”sample2″></div>
</p>
<p>
mask-origin: border-box; を指定<br>
<div class=”sample3″></div>
</p>
<p>
mask-origin: margin-box; を指定<br>
<div class=”sample4″></div>
</p>
<p>
mask-origin: fill-box; を指定<br>
<div class=”sample5″></div>
</p>
<p>
mask-origin: stroke-box; を指定<br>
<div class=”sample6″></div>
</p>
<p>
mask-origin: view-box; を指定<br>
<div class=”sample7″></div>
</p>
ブラウザ上の表示
マスクを指定しない状態のdiv要素
マスクレイヤーとして使用する画像
mask-origin: content-box; を指定
mask-origin: padding-box; を指定
mask-origin: border-box; を指定
mask-origin: margin-box; を指定
mask-origin: fill-box; を指定
mask-origin: stroke-box; を指定
mask-origin: view-box; を指定
■ベンダープレフィックスを付けた場合の使用例
CSSソースは外部ファイル（sample.css）に記述
.prefix_sample0, .prefix_sample1, .prefix_sample2, .prefix_sample3, .prefix_sample4, .prefix_sample5, .prefix_sample6, .prefix_sample7, .prefix_sample8 {
width:80px; height:40px;
margin:10px; padding:10px;
background-color: pink;
border: 30px solid red;
}
div.prefix_sample1 {
-webkit-mask-image: url(‘images/maru20.png’);
-webkit-mask-origin: content-box;
}
div.prefix_sample2 {
-webkit-mask-image: url(‘images/maru20.png’);
-webkit-mask-origin: padding-box;
}
div.prefix_sample3 {
-webkit-mask-image: url(‘images/maru20.png’);
-webkit-mask-origin: border-box;
}
div.prefix_sample4 {
-webkit-mask-image: url(‘images/maru20.png’);
-webkit-mask-origin: margin-box;
}
div.prefix_sample5 {
-webkit-mask-image: url(‘images/maru20.png’);
-webkit-mask-origin: fill-box;
}
div.prefix_sample6 {
-webkit-mask-image: url(‘images/maru20.png’);
-webkit-mask-origin: stroke-box;
}
div.prefix_sample7 {
-webkit-mask-image: url(‘images/maru20.png’);
-webkit-mask-origin: view-box;
}
HTMLソース
<p>
マスクを指定しない状態のdiv要素<br>
<div class=”prefix_sample0″></div>
</p>
<p>
マスクレイヤーとして使用する画像<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/maru20.png”>
</p>
<p>
mask-origin: content-box; を指定<br>
<div class=”prefix_sample1″></div>
</p>
<p>
mask-origin: padding-box; を指定<br>
<div class=”prefix_sample2″></div>
</p>
<p>
mask-origin: border-box; を指定<br>
<div class=”prefix_sample3″></div>
</p>
<p>
mask-origin: margin-box; を指定<br>
<div class=”prefix_sample4″></div>
</p>
<p>
mask-origin: fill-box; を指定<br>
<div class=”prefix_sample5″></div>
</p>
<p>
mask-origin: stroke-box; を指定<br>
<div class=”prefix_sample6″></div>
</p>
<p>
mask-origin: view-box; を指定<br>
<div class=”prefix_sample7″></div>
</p>
ブラウザ上の表示
マスクを指定しない状態のdiv要素
マスクレイヤーとして使用する画像
mask-origin: content-box; を指定
mask-origin: padding-box; を指定
mask-origin: border-box; を指定
mask-origin: margin-box; を指定
mask-origin: fill-box; を指定
mask-origin: stroke-box; を指定
mask-origin: view-box; を指定