CSS mask-position 属性

定義と用法

mask-position 属性はマスク画像の開始位置を設定します（マスク位置領域に対して相対的です）。

ヒント：デフォルトでは、マスク画像は要素の左上隅に配置され、垂直および水平方向に繰り返されます。

インスタンス

例 1

マスクレイヤーの画像位置を中央に設定します：

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: center;
}

実際に試してみてください

例 2

マスクレイヤーの画像位置を右下角に設定します：

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: 100% 100%;
}

実際に試してみてください

CSS 文法

mask-position: value;

属性値

値 説明
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
 1つのキーワードのみ指定した場合、もう1つの値は "center" になります。
x% y%

最初の値は水平位置、2番目の値は垂直位置です。

左上角は 0% 0% です。右下角は 100% 100% です。

値を1つ指定した場合、もう1つの値は50%になります。

デフォルト値は：0% 0%
xpos ypos

最初の値は水平位置、2番目の値は垂直位置です。

左上角は 0 0 です。単位はピクセル（0px 0px）または他の CSS 単位です。

値を1つ指定した場合、もう1つの値は50%になります。

% と位置を混ぜて使用できます。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性は親要素から継承されます。参照してください inherit。

技術的詳細

デフォルト値： 0% 0%
継承性： いいえ
アニメーション作成： サポートされていません。参照してください：アニメーション関連属性。
バージョン： CSS マスクモジュール レベル 1
JavaScript 文法： object.style.maskPosition="100px center"

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

クローム エッジ ファイアフォックス サファリ オペラ
120 120 53 15.4 106

相关页面

教程：CSS 遮罩

参考：CSS mask 属性

参考：CSS mask-clip 属性

参考：CSS mask-composite 属性

参考：CSS mask-image 属性

参考：CSS mask-mode 属性

参考：CSS mask-origin 属性

参考：CSS mask-repeat 属性

参考：CSS mask-size 属性

参考：CSS mask-type 属性