-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; /* <percentage> 値 */ -webkit-mask-position-x: 100%; -webkit-mask-position-x: -50%; /* <length> 値 */ -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% |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | ボックス自身の寸法に対する相対値 |
| 計算値 | <length> の場合は絶対的な値、それ以外はパーセント値 |
| アニメーションの種類 | 離散値 |
構文
値
<length-percentage>-
ボックスの左パディングの辺から見た画像の左端の位置を示す長さです。パーセント値の場合は、ボックスのパディング領域の水平方向の寸法に対して計算されます。つまり、
0%という値は、画像の左端がボックスの左パディングの辺と一致していることを意味し、100%という値は、画像の右端がボックスの右パディングの辺と一致していることを意味します。 left-
0%と同等です。 center-
50%と同等です。 right-
100%と同等です。
公式定義
| 初期値 | 0% |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | ボックス自身の寸法に対する相対値 |
| 計算値 | <length> の場合は絶対的な値、それ以外はパーセント値 |
| アニメーションの種類 | 離散値 |
形式文法
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%; } 仕様書
標準には含まれていません。
ブラウザーの互換性
関連情報
-webkit-mask-position, -webkit-mask-position-y, -webkit-mask-origin, -webkit-mask-attachment