プロパティ mask-position
プロパティ mask-position は、要素に対するマスクの初期位置を設定します。
background-position と同様に動作しますが、マスクに適用されます。
構文
セレクタ {
mask-position: <position>;
}
値
| 値 | 説明 |
|---|---|
top left |
左上（デフォルト）。 |
center |
要素の中央。 |
50% 50% |
center と同様。 |
right bottom |
右下。 |
100px 200px |
ピクセル単位の具体的な座標。 |
例 . マスクの中央配置
画像の中央にハートのマスク：
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
例 . 左上
左上のマスク：
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left top;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
例 . 右下
右下のマスク：
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: right bottom;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
例 . 正確な座標
正確な座標でマスクを配置：
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 100px 200px;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
例 . パーセントによる配置
パーセントを使用したマスクの配置：
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 30% 70%;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
関連項目
-
プロパティ
mask-size,
マスクのサイズを定義します -
プロパティ
mask-origin,
配置の基準点を定義します -
プロパティ
mask,
すべてのマスキングプロパティの一括指定
