mask-position

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

css
/* キーワード値 */
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: revert;
mask-position: unset;

構文

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

値

<position>

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

公式定義

初期値0% 0%
適用対象すべての要素。 SVG の場合は defs 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される
継承なし
パーセント値マスク描画領域の寸法からマスクレイヤー画像の寸法を引いたものに対する相対値 (background-position のテキストを参照)
計算値原点を表す 2 つのキーワードと、その原点からの 2 つのオフセットで、それぞれが絶対的な長さ (<length> が指定された場合) またはパーセント値で指定される。
アニメーションの種類反復可能リスト

形式文法

mask-position = 
  <position>#  

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

<length-percentage> = 
  <length>      |
  <percentage>

例

マスク位置の設定

mask-position の値を上記の許容値のいずれかに変更してみてください。 Chromium ベースのブラウザーでこの例を見る場合は、-webkit-mask-position の値を変更してください。

仕様書

Specification
CSS Masking Module Level 1
# the-mask-position

ブラウザーの互換性

BCD tables only load in the browser

関連情報