mask-position

mask-position は CSS プロパティで、定義されたマスク画像それぞれについて、 mask-origin で設定されたマスク位置レイヤーからの相対で初期位置を設定します。

/* キーワード値 */
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;

/* <position> 値 */
mask-position: 25% 75%;
mask-position: 0px 0px;
mask-position: 10% 8em;

/* 複数の値 */
mask-position: top right;
mask-position: 1rem 1rem, center;

/* グローバル値 */
mask-position: inherit;
mask-position: initial;
mask-position: unset;

構文

1つ以上の <position> 値をコンマで区切ったもの。

値

<position>

要素ボックスの辺からの二次元の位置を表す1つから4つの値です。相対または絶対オフセットを与えることができます。なお、位置は要素ボックスの外に設定することができます。

形式文法

<position>#
where 
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
where 
<length-percentage> = <length> | <percentage>

例

CSS

#wrapper {
  border: 1px solid black;
  width: 250px;
  height: 250px;
}

#masked {
  width: 250px;
  height: 250px;
  background: blue linear-gradient(red, blue);
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-repeat: no-repeat;
  mask-position: top right; /* Can be changed in the live sample */
  margin-bottom: 10px;
}

<div id="wrapper">
  <div id="masked">
  </div>
</div>
<select id="maskPosition">
  <option value="top">top</option>
  <option value="center">center</option>
  <option value="bottom">bottom</option>
  <option value="top right" selected>top right</option>
  <option value="center center">center center</option>
  <option value="bottom left">bottom left</option>
  <option value="10px 20px">10px 20px</option>
  <option value="60% 20%">60% 20%</option>
</select>

var maskPosition = document.getElementById("maskPosition");
maskPosition.addEventListener("change", function (evt) {
  document.getElementById("masked").style.maskPosition = evt.target.value;
});

仕様書

ブラウザーの対応