CSS mask-repeat 属性
- 前のページ mask-position
- 次のページ mask-size
定義と使用法
mask-repeat 属性はマスク画像がどのように繰り返されるかまたは繰り返されないかを設定します。
デフォルトでは、マスク画像は垂直方向と水平方向の両方に繰り返されます。
インスタンス
例 1
使用 mask-repeat: no-repeat; および mask-repeat: repeat;：
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
mask-size: 50%;
mask-repeat: no-repeat;
}
.mask2 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
mask-size: 50%;
mask-repeat: repeat;
}
例 2
使用 mask-repeat: round; および mask-repeat: space;：
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
mask-size: 30%;
mask-repeat: round;
}
.mask2 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
mask-size: 30%;
mask-repeat: space;
}
例 3
使用 mask-repeat: repeat-x; および mask-repeat: repeat-y;：
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
mask-size: 30%;
mask-repeat: repeat-x;
}
.mask2 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
mask-size: 30%;
mask-repeat: repeat-y;
}
CSS 言語
mask-repeat: repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;
属性値
| 値 | 説明 |
|---|---|
| repeat |
マスク画像は垂直方向と水平方向の両方に繰り返されます。 最後の画像が適切でない場合は、カットされます。 これはデフォルト値です。 |
| repeat-x | マスク画像は水平方向にのみ繰り返されます。 |
| repeat-y | マスク画像は垂直方向にのみ繰り返されます。 |
| space |
マスク画像はできるだけ多く繰り返され、カットされません。 最初の画像と最後の画像がそれぞれ要素の両側に固定され、画像間の空白が均等に分布されます。 |
| round | マスク画像は繰り返しされ、空間を埋めるために圧縮または伸張されます（隙間はありません）。 |
| no-repeat | マスク画像は繰り返しされず、一度だけ表示されます。 |
| initial | この属性をデフォルト値に設定します。参照してください： initial。 |
| inherit | 親要素からこの属性を継承します。参照してください： inherit。 |
技術的詳細
| デフォルト値： | repeat |
|---|---|
| 継承性： | いいえ |
| アニメーション制作： | サポートしていません。参照してください：アニメーション関連属性。 |
| バージョン： | CSS マスクモジュール レベル 1 |
| JavaScript 言語： | object.style.maskRepeat="no-repeat" |
ブラウザのサポート
テーブルに記載されている数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 120 | 120 | 53 | 15.4 | 106 |
関連ページ
チュートリアル：CSS 遮罩
参照：CSS mask 属性
- 前のページ mask-position
- 次のページ mask-size
