CSS mask-repeat प्रभाव

परिभाषा और उपयोग

mask-repeat गुण को मास्क इमेज के रीपीट करने के लिए कैसे सेट करें।

डिफ़ॉल्ट में, मास्क इमेज खंड और आड़े दिशा में दोनों ओर रीपीट होता है।

उदाहरण

उदाहरण 1

इस्तेमाल mask-repeat: no-repeat; साथ mask-repeat: repeat;और

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: repeat;
}

स्वयं आयात्रा करें

उदाहरण 2

इस्तेमाल mask-repeat: round; साथ mask-repeat: space;और

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: round;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: space;
}

स्वयं आयात्रा करें

उदाहरण 3

इस्तेमाल mask-repeat: repeat-x; साथ mask-repeat: repeat-y;और

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-x;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-y;
}

स्वयं आयात्रा करें

CSS ग्रामर

mask-repeat: repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;

गुण मान

मान वर्णन
रीपीट

मास्क इमेज खंड और आड़े दिशा में दोनों ओर रीपीट होगी।

अगर आखिरी इमेज उचित नहीं है, तो इसे कट दिया जाएगा。

यह डिफ़ॉल्ट मान है।
रीपीट-एक्स मास्क इमेज केवल आड़े दिशा में रीपीट होगी।
रीपीट-य मास्क इमेज केवल खंड की ओर रीपीट होगी।
स्पेस

मास्क इमेज बिना कटवाए जाने के अधिकतम रीपीट होगी।

पहला और आखिरी इमेज क्रमशः एलीमेंट के दोनों तरफ की ओर लगे होंगे और इमेज के बीच की खाली जगह समान रूप से वितरित होगी।
राउंड मास्क इमेज रीपीट होगी और इसे फिले जाने के लिए संकुचित या फैलाया जाएगा (बिना खाली जगह के)।
no-repeat मास्क इमेज रीपीट नहीं होगी। इमेज केवल एक बार दिखायी जाएगी。
इनिशियल इस गुण को उसके डिफ़ॉल्ट मान पर सेट करें। देखेंः इनिशियल。
इनहेरिट अपने पितृ एलीमेंट से इस गुण को इनहेरिट करें। देखेंः इनहेरिट。

तकनीकी विवरण

डिफ़ॉल्ट मानः रीपीट
विरासतीयताः नहीं
एनीमेशन निर्माणः समर्थन नहीं है। देखेंःएनीमेशन संबंधी गुण。
संस्करणः CSS मास्किंग मॉड्यूल लेवल 1
जेसक्रिप्ट ग्रामरः object.style.maskRepeat="no-repeat"

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

च्रोम एज फायरफॉक्स सफारी ओपेरा
120 120 53 15.4 106

संबंधित पृष्ठ

ट्यूटोरियल:CSS मास्क

संदर्भ:CSS mask प्रभाव

संदर्भ:CSS mask-clip प्रभाव

संदर्भ:CSS mask-composite प्रभाव

संदर्भ:CSS mask-image प्रभाव

संदर्भ:CSS mask-mode प्रभाव

संदर्भ:CSS mask-origin प्रभाव

संदर्भ:CSS mask-position प्रभाव

संदर्भ:CSS mask-size प्रभाव

संदर्भ:CSS mask-type प्रभाव