CSS -webkit-mask-position-y プロパティ
非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
-webkit-mask-position-y は CSS のプロパティで、マスク画像の初期の垂直方向の位置を設定します。
構文
css
/* キーワード値 */
-webkit-mask-position-y: top;
-webkit-mask-position-y: center;
-webkit-mask-position-y: bottom;
/* <percentage> 値 */
-webkit-mask-position-y: 100%;
-webkit-mask-position-y: -50%;
/* <length> 値 */
-webkit-mask-position-y: 50px;
-webkit-mask-position-y: -1cm;
/* 複数の値 */
-webkit-mask-position-y:
50px,
25%,
-3em;
/* グローバル値 */
-webkit-mask-position-y: inherit;
-webkit-mask-position-y: initial;
-webkit-mask-position-y: revert;
-webkit-mask-position-y: revert-layer;
-webkit-mask-position-y: unset;
値
<length-percentage>-
ボックスの上パディングの辺から見た画像の上端の位置を示す長さです。パーセント値の場合は、ボックスのパディング領域の垂直方向の寸法に対して計算されます。
0%という値は、画像の上端がボックスの上パディングの辺と一致していることを意味し、100%という値は、画像の下端がボックスの下パディングの辺と一致していることを意味します。 top-
0%と同等です。 bottom-
100%と同等です。 center-
50%と同等です。
公式定義
| 初期値 | 0% |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | ボックス自身の寸法に対する相対値 |
| 計算値 | <length> の場合は絶対的な値、それ以外はパーセント値 |
| アニメーションの種類 | 離散値 |
形式文法
-webkit-mask-position-y =
[ <length-percentage> | top | center | bottom ]#
<length-percentage> =
<length> |
<percentage>
例
マスク画像の垂直方向の位置指定
css
.exampleOne {
-webkit-mask-image: url("mask.png");
-webkit-mask-position-y: bottom;
}
.exampleTwo {
-webkit-mask-image: url("mask.png");
-webkit-mask-position-y: 25%;
}
仕様書
標準には含まれていません。
ブラウザーの互換性
関連情報
-webkit-mask-position, -webkit-mask-position-x, -webkit-mask-origin