CSSマスクリピートプロパティ
例
mask-repeat: no-repeat;
およびを使用するmask-repeat:
repeat;
:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 50%;
mask-size: 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.mask2 {
-webkit-mask-image:
url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size:
50%;
mask-size: 50%;
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
このmask-repeat
プロパティは、マスク画像を繰り返すかどうか/どのように繰り返すかを設定します。
デフォルトでは、マスク画像は垂直方向と水平方向の両方で繰り返されます。
デフォルト値: | 繰り返す |
---|---|
遺伝性の: | いいえ |
アニメート可能: | 番号。アニメート可能について読む |
バージョン: | CSS3 |
JavaScript構文: | object .style.maskRepeat = "no-repeat" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-webkit-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
Property | |||||
---|---|---|---|---|---|
mask-repeat | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 3.1 -webkit- | 15.0 -webkit- |
CSS構文
mask-repeat:
repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;
プロパティ値
Value | Description |
---|---|
repeat | The mask image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default |
repeat-x | The mask image is repeated only horizontally |
repeat-y | The mask image is repeated only vertically |
space | The mask image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images |
round | The mask image is repeated and squished or stretched to fill the space (no gaps) |
no-repeat | The mask image is not repeated. The image will only be shown once |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
その他の例
例
mask-repeat: round;
およびを使用するmask-repeat:
space;
:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: round;
mask-repeat:
round;
}
.mask2 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: space;
mask-repeat:
space;
}
例
mask-repeat: repeat-x;
およびを使用するmask-repeat:
repeat-y;
:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: repeat-x;
mask-repeat:
repeat-x;
}
.mask2 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: repeat-y;
mask-repeat:
repeat-y;
}
関連ページ
CSSリファレンス:mask-imageプロパティ
CSSリファレンス:mask-modeプロパティ
CSSリファレンス:mask-originプロパティ
CSSリファレンス:mask-positionプロパティ
CSSリファレンス:mask-sizeプロパティ
CSSチュートリアル:CSSマスキング