CSS - mask-repeat
概要
| 属性名 | mask-repeat |
|---|---|
| 値 | <repeat-style># |
| 値の詳細 | <repeat-style> = [ repeat | no-repeat | space | round ]{1,2} | repeat-x | repeat-y |
| 初期値 | repeat |
| 適用可能要素 | すべての要素。 |
| 継承 | 継承しない |
| サポート | https://caniuse.com/mdn-css_properties_mask-repeat |
説明
マスクイメージの繰り返しスタイルを指定します。repeat, no-repeat, space, round はひとつ指定した場合は縦横両方向の、ふたつ指定した場合は横方向、縦方向の繰り返しスタイルになります。詳細は CSSマスク を参照してください。
- repeat
- マスクイメージを繰り返し表示します。
- no-repeat
- マスクイメージを繰り返すことなく1回のみ表示します。
- space
- マスクイメージを整数個繰り返します。余白が生じる場合はそれぞれのマスクイメージの間にスペースを入れます。
- round
- マスクイメージを整数個繰り返します。余白が生じる場合はそれぞれのマスクイメージを拡大・縮小します。
- repeat-x
- 横軸方向のみ繰り返します。repeat no-repeat と同じ意味を持ちます。
- repeat-y
- 縦軸方向のみ繰り返します。no-repeat repeat と同じ意味を持ちます。
mask-image で複数の画像を指定している場合は、mask-repeat にもカンマ(,)区切りで複数の値を指定することができます。
使用例
CSS
mask-repeat: repeat; /* mask-repeat: repeat repeat; */ mask-repeat: no-repeat; /* mask-repeat: no-repeat no-repeat; */ mask-repeat: space; /* mask-repeat: space space; */ mask-repeat: round; /* mask-repeat: round round; */ mask-repeat: repeat-x; /* mask-repeat: repeat no-repeat; */ mask-repeat: repeat-y; /* mask-repeat: no-repeat repeat; */
リンク
- https://developer.mozilla.org/ja/docs/Web/CSS/mask-repeat
- https://drafts.fxtf.org/css-masking/#the-mask-repeat
Copyright (C) 2024 杜甫々
初版：2024年12月29日、最終更新：2024年12月29日
https://www.tohoho-web.com/css/prop/mask-repeat.htm