mask-position

mask-positionCSS プロパティで、定義されたマスク画像それぞれについて、 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: revert;
mask-position: unset;

構文

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

<position>

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

公式定義

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

形式文法

mask-position = 
<position>#

<position> =
[ left | center | right | top | bottom | start | end | <length-percentage> ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ center | [ left | right | x-start | x-end ] <length-percentage>? ] && [ center | [ top | bottom | y-start | y-end ] <length-percentage>? ] |
[ center | [ start | end ] <length-percentage>? ] [ center | [ start | end ] <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

関連情報