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