⌘K

プロパティ mask-position

プロパティ mask-position は、要素に対するマスクの初期位置を設定します。 background-position と同様に動作しますが、マスクに適用されます。

構文

cssセレクタ {
  mask-position: <position>;
}

値

値 説明
top left 左上（デフォルト）。
center 要素の中央。
50% 50% center と同様。
right bottom 右下。
100px 200px ピクセル単位の具体的な座標。

例 . マスクの中央配置

画像の中央にハートのマスク： 

html<img id="image" src="image.jpg">
css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

例 . 左上

左上のマスク： 

html<img id="image" src="image.jpg">
css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: left top;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

例 . 右下

右下のマスク： 

html<img id="image" src="image.jpg">
css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: right bottom;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

例 . 正確な座標

正確な座標でマスクを配置： 

html<img id="image" src="image.jpg">
css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: 100px 200px;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

例 . パーセントによる配置

パーセントを使用したマスクの配置： 

html<img id="image" src="image.jpg">
css#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,
    すべてのマスキングプロパティの一括指定
BackmaskプロパティNextプロパティ mask-image