मास्क-रिपीट गुण
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)
बिना दोहराव के केंद्र में एक दिल:
<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गुण,
मास्किंग के सभी गुणों के लिए संक्षिप्त रूप
