mask-positionプロパティは、マスクレイヤーイメージの位置を指定する際に使用します。
mask-positionプロパティに指定できる値は、background-positionプロパティに指定できる値と同じです。
パーセント値や単位付き数値を1つだけ記述すると水平方向の位置が指定され、省略された垂直方向の位置は初期値の center となります。
値を半角スペース区切りで2つ記述すると、水平方向の位置 垂直方向の位置の順で指定されます。
また、top, right, bottom, leftのキーワードと数値を組み合わせることで、端からのオフセット距離を指定できます。
例えば、mask-position:bottom 10px right 20px; は、下端から10px垂直オフセット、右端から左に20px水平オフセットを表します。
このページ内のサンプルでは、以下の80×80ピクセルの画像をマスクレイヤーとして使用します。
ハートの図形部分以外は透明にしてあります。
マスク処理対象となる要素は、以下の200×200ピクセルの画像です。
img.sample0 {
mask-image: url(‘images/heart_s.png’);
mask-repeat: no-repeat;
}
img.sample1 {
mask-image: url(‘images/heart_s.png’);
mask-repeat: no-repeat;
mask-position: right bottom;
}
img.sample2 {
mask-image: url(‘images/heart_s.png’);
mask-repeat: no-repeat;
mask-position:bottom 10px right 20px;
}
<p>
mask-positionプロパティの指定なし<br>
<img class=”sample0″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
<p>
mask-position: right bottom; を指定<br>
<img class=”sample1″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
<p>
mask-position:bottom 10px right 20px; を指定<br>
<img class=”sample2″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
mask-positionプロパティの指定なし
mask-position: right bottom; を指定
mask-position:bottom 10px right 20px; を指定
img.prefix_sample0 {
-webkit-mask-image: url(‘images/heart_s.png’);
-webkit-mask-repeat: no-repeat;
}
img.prefix_sample1 {
-webkit-mask-image: url(‘images/heart_s.png’);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: right bottom;
}
img.prefix_sample2 {
-webkit-mask-image: url(‘images/heart_s.png’);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position:bottom 10px right 20px;
}
<p>
mask-positionプロパティの指定なし<br>
<img class=”prefix_sample0″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
<p>
mask-position: right bottom; を指定<br>
<img class=”prefix_sample1″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
<p>
mask-position:bottom 10px right 20px; を指定<br>
<img class=”prefix_sample2″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
mask-positionプロパティの指定なし
mask-position: right bottom; を指定
mask-position:bottom 10px right 20px; を指定
