CSS リファレンスマニュアル

CSS 属性

mask-size 属性はマスクレイヤーの画像のサイズを指定します。

マスクレイヤーの画像のサイズ（パーセンテージで指定）：

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

マスクレイヤーの画像のサイズ（ピクセルで指定）：

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 200px 200px;
  mask-repeat: no-repeat;
}

mask-size: auto|size|contain|cover|initial|inherit;

値	説明
auto	デフォルト値。
size	マスク画像のサイズを指定します。px、emなどの単位を使用できます。%も使用できます。
contain	マスク画像を拡大して、幅と高さがコンテナの内部に適応します。
cover	マスク画像を拡大して、幅と高さがコンテナを覆うようにします。
initial	この属性をデフォルト値に設定します。参照してください： initial。
inherit	親要素からこの属性を継承します。参照してください： inherit。

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

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

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