CSSマスクサイズプロパティ
例
マスクレイヤー画像のサイズ(パーセント)を設定します。
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 70%;
mask-size: 70%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
このmask-size
プロパティは、マスクレイヤー画像のサイズを指定します。
デフォルト値: | 自動 |
---|---|
遺伝性の: | いいえ |
アニメート可能: | 番号。アニメート可能について読む |
バージョン: | CSS3 |
JavaScript構文: | object .style.maskSize = "100px 200px" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-webkit-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
Property | |||||
---|---|---|---|---|---|
mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
CSS構文
mask-image: auto|size|contain|cover|initial|inherit;
プロパティ値
Value | Description |
---|---|
auto | This is default |
size | Specifies the size of the mask image in px, em, etc, or in % |
contain | Scales the mask image in a way that both its width and its height fit inside the container |
cover | Scales the mask image in a way that both its width and its height cover the container |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
その他の例
例
マスクレイヤー画像のサイズ(ピクセル単位)を設定します。
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 200px 200px;
mask-size: 200px 200px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
関連ページ
CSSリファレンス:mask-imageプロパティ
CSSリファレンス:mask-modeプロパティ
CSSリファレンス:mask-originプロパティ
CSSリファレンス:mask-positionプロパティ
CSSリファレンス:mask-repeatプロパティ
CSSチュートリアル:CSSマスキング