CSS मास्क-रिपीट प्रॉपर्टी
उदाहरण
का उपयोग करना mask-repeat: no-repeat;
और mask-repeat:
repeat;
:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 50%;
mask-size: 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.mask2 {
-webkit-mask-image:
url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size:
50%;
mask-size: 50%;
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
संपत्ति सेट करती है कि mask-repeat
क्या/कैसे एक मुखौटा छवि दोहराई जाएगी।
डिफ़ॉल्ट रूप से, एक मुखौटा छवि लंबवत और क्षैतिज रूप से दोहराई जाती है।
डिफ़ॉल्ट मान: | दोहराना |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | नहीं। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | CSS3 |
जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.maskRepeat="no-repeat" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
-वेबकिट के बाद की संख्याएं- उपसर्ग के साथ काम करने वाले पहले संस्करण को निर्दिष्ट करें।
Property | |||||
---|---|---|---|---|---|
mask-repeat | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 3.1 -webkit- | 15.0 -webkit- |
सीएसएस सिंटेक्स
mask-repeat:
repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;
सम्पत्ति की कीमत
Value | Description |
---|---|
repeat | The mask image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default |
repeat-x | The mask image is repeated only horizontally |
repeat-y | The mask image is repeated only vertically |
space | The mask image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images |
round | The mask image is repeated and squished or stretched to fill the space (no gaps) |
no-repeat | The mask image is not repeated. The image will only be shown once |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
और ज्यादा उदाहरण
उदाहरण
का उपयोग करना mask-repeat: round;
और mask-repeat:
space;
:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: round;
mask-repeat:
round;
}
.mask2 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: space;
mask-repeat:
space;
}
उदाहरण
का उपयोग करना mask-repeat: repeat-x;
और mask-repeat:
repeat-y;
:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: repeat-x;
mask-repeat:
repeat-x;
}
.mask2 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: repeat-y;
mask-repeat:
repeat-y;
}
संबंधित पृष्ठ
सीएसएस संदर्भ: मुखौटा-छवि संपत्ति
CSS संदर्भ: मास्क-मोड गुण
सीएसएस संदर्भ: मुखौटा-मूल संपत्ति
सीएसएस संदर्भ: मुखौटा-स्थिति संपत्ति
सीएसएस संदर्भ: मुखौटा-आकार की संपत्ति
सीएसएस ट्यूटोरियल: सीएसएस मास्किंग