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: unset;
初期値center
適用対象すべての要素。 SVG では、 defs 要素及びすべてのグラフィック要素を除いたコンテナー要素に適用されます。
継承なし
パーセンテージrefer to size of mask painting area minus size of mask layer image (see the text for background-position)
メディア視覚
計算値Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.
アニメーションの種類repeatable list of simple list of length, percentage, or calc
正規順序構文通り

構文

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;
}

仕様書

仕様書 状態 備考
CSS Masking Module Level 1
mask-position の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
mask-position
実験的
Chrome 完全対応 1
接頭辞付き
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 18Firefox 完全対応 53
完全対応 53
未対応 20 — 53
無効
無効 From version 20 until version 53 (exclusive): this feature is behind the layout.css.masking.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 15
接頭辞付き
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 3.2
接頭辞付き
完全対応 3.2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 2
接頭辞付き
完全対応 2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 18
接頭辞付き
完全対応 18
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 53
完全対応 53
未対応 20 — 53
無効
無効 From version 20 until version 53 (exclusive): this feature is behind the layout.css.masking.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 14
接頭辞付き
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 3.2
接頭辞付き
完全対応 3.2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。