★CSSリファレンス
mask-position …… マスクレイヤーイメージの位置を指定する
広告
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ピクセルの画像です。
■値
- %値
- パーセント値（%）で指定
- 長さ
- px、pt、cmなどの単位付き数値で長さを指定
- top
- 上端。垂直方向に 0% を指定したのと同じ
- right
- 右端。水平方向に 100% を指定したのと同じ
- bottom
- 下端。垂直方向に 100% を指定したのと同じ
- left
- 左端。水平方向に 0% を指定したのと同じ
- center
- 中央。水平方向や垂直方向に 50% を指定したのと同じ（初期値）
■初期値・適用対象・値の継承
- 初期値
- center
- 適用対象
- すべての要素。 SVGでは、defs要素とすべてのグラフィックス要素を除くコンテナ要素に適用される
- 値の継承
- しない
■使用例
CSSソースは外部ファイル（sample.css）に記述
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;
}
HTMLソース
<p>mask-positionプロパティの指定なし<br>
<img class="sample0" src="images/uirou.png">
</p>
<p>
mask-position: right bottom; を指定<br>
<img class="sample1" src="images/uirou.png">
</p>
<p>
mask-position:bottom 10px right 20px; を指定<br>
<img class="sample2" src="images/uirou.png">
</p>
↓↓↓
ブラウザ上の表示
mask-positionプロパティの指定なし
mask-position: right bottom; を指定
mask-position:bottom 10px right 20px; を指定
■ベンダープレフィックスを付けた場合の使用例
CSSソースは外部ファイル（sample.css）に記述
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;
}
HTMLソース
<p>mask-positionプロパティの指定なし<br>
<img class="prefix_sample0" src="images/uirou.png">
</p>
<p>
mask-position: right bottom; を指定<br>
<img class="prefix_sample1" src="images/uirou.png">
</p>
<p>
mask-position:bottom 10px right 20px; を指定<br>
<img class="prefix_sample2" src="images/uirou.png">
</p>
↓↓↓
ブラウザ上の表示
mask-positionプロパティの指定なし
mask-position: right bottom; を指定
mask-position:bottom 10px right 20px; を指定
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
© HTMQ