-webkit-mask-position-x
非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
-webkit-mask-position-x は CSS のプロパティで、マスク画像の初期の水平方向の位置を設定します。
css
/* キーワード値 */
-webkit-mask-position-x: left;
-webkit-mask-position-x: center;
-webkit-mask-position-x: right;
/* 値 */
-webkit-mask-position-x: 100%;
-webkit-mask-position-x: -50%;
/* 値 */
-webkit-mask-position-x: 50px;
-webkit-mask-position-x: -1cm;
/* 複数の値 */
-webkit-mask-position-x:
50px,
25%,
-3em;
/* グローバル値 */
-webkit-mask-position-x: inherit;
-webkit-mask-position-x: initial;
-webkit-mask-position-x: unset;
| 初期値 | 0% |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | ボックス自身の寸法に対する相対値 |
| 計算値 | |
| アニメーションの種類 | 離散値 |
構文
値
公式定義
| 初期値 | 0% |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | ボックス自身の寸法に対する相対値 |
| 計算値 | |
| アニメーションの種類 | 離散値 |
形式文法
Error: could not find syntax for this item
例
マスク画像の水平方向の位置指定
css
.exampleOne {
-webkit-mask-image: url(mask.png);
-webkit-mask-position-x: right;
}
.exampleTwo {
-webkit-mask-image: url(mask.png);
-webkit-mask-position-x: 25%;
}
仕様書
標準には含まれていません。