【CSS Modules】mask-repeatプロパティの使い方

mask-repeatプロパティは、CSSのマスキング機能において、マスクとして使用される画像が要素の描画領域内でどのように繰り返されるかを保持するプロパティです。このプロパティを使用することで、Webページのデザインにおいて、要素に適用するマスク画像の繰り返しパターンを柔軟に制御できます。具体的には、mask-repeatは、背景画像におけるbackground-repeatプロパティと同様の役割を果たします。例えば、no-repeatという値を指定すると、マスク画像は一度だけ表示され、繰り返されません。repeatを指定すると、マスク画像は水平方向と垂直方向の両方に繰り返され、要素全体を覆うように配置されます。repeat-xでは水平方向にのみ繰り返し、repeat-yでは垂直方向にのみ繰り返します。また、roundという値を指定すると、マスク画像が要素の領域全体に収まるように、画像のサイズを拡大縮小しながら繰り返して表示されます。spaceを指定すると、マスク画像を繰り返して表示する際に、画像と画像の間に均等なスペースが配置され、空白が出ないように調整されます。これらの値を適切に使い分けることで、複雑なパターンを持つマスクや、特定の領域にだけ適用したいマスクなど、多様な視覚表現を実現することができます。mask-repeatは、デザインの自由度を高め、より洗練されたWebインターフェースを作成するために不可欠なプロパティの一つです。

Copy
1selector {
2  mask-repeat: repeat;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません