mask-repeat プロパティ
mask-repeatプロパティは、マスクのサイズが要素のサイズよりも小さい場合のマスクの繰り返し方を設定します。
background-repeatと同様に動作しますが、
マスクに適用されます。
構文
セレクター {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
値
| 値 | 説明 |
|---|---|
repeat |
マスクは両方の軸に沿って繰り返されます（デフォルト）。 |
no-repeat |
マスクは繰り返されません。 |
repeat-x |
マスクは水平方向にのみ繰り返されます。 |
repeat-y |
マスクは垂直方向にのみ繰り返されます。 |
space |
マスクは均等な間隔を空けて繰り返されます。 |
round |
マスクは均一に塗りつぶすためにスケーリングされます。 |
例 . 繰り返しなし (no-repeat)
中央に1つのハート、繰り返しなし：
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 100px;
mask-repeat: no-repeat;
}
:
例 . 水平方向の繰り返し (repeat-x)
ハートは水平方向にのみ繰り返されます：
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left center;
mask-size: 50px;
mask-repeat: repeat-x;
}
:
例 . 垂直方向の繰り返し (repeat-y)
ハートは垂直方向にのみ繰り返されます：
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center top;
mask-size: 50px;
mask-repeat: repeat-y;
}
:
例 . 間隔を空けた繰り返し (space)
ハートが均等な間隔で分配されています：
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: space;
}
:
例 . スケーリングによる繰り返し (round)
ハートが均一に塗りつぶされるようにスケーリングされます：
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
関連項目
-
mask-sizeプロパティ,
マスクのサイズを定義します -
mask-positionプロパティ,
マスクの位置を設定します -
maskプロパティ,
すべてのマスキングプロパティの一括指定
