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: revert;
mask-position: unset;
構文
1 つ以上の <position> 値をカンマで区切ったもの。
値
<position>-
要素ボックスの辺からの二次元の位置を表す 1 つから 4 つの値です。相対または絶対オフセットを与えることができます。なお、位置は要素ボックスの外に設定することができます。
公式定義
| 初期値 | center |
|---|---|
| 適用対象 | すべての要素。 SVG の場合は defs 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| パーセント値 | マスク描画領域の寸法からマスクレイヤー画像の寸法を引いたものに対する相対値 (background-position のテキストを参照) |
| 計算値 | 原点を表す 2 つのキーワードと、その原点からの 2 つのオフセットで、それぞれが絶対的な長さ (<length> が指定された場合) またはパーセント値で指定される。 |
| アニメーションの種類 | 長さ、パーセント値、 calc の単純なリストの反復可能リスト |
形式文法
<position>#ここで
<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> ] ]ここで
<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