CSS mask-size प्रयोग

वर्णन और उपयोग

mask-size गुण के द्वारा मास्क लेयर इमेज का आकार निर्दिष्ट किया जाता है।

उदाहरण

उदाहरण 1

मास्क लेयर इमेज का आकार (प्रतिशत में) सेट करें:

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

अपने आप प्रयास करें

उदाहरण 2

मास्क लेयर इमेज का आकार (पिक्सल में) सेट करें:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 200px 200px;
  mask-repeat: no-repeat;
}

अपने आप प्रयास करें

CSS व्याकरण

mask-size: auto|size|contain|cover|initial|inherit;

गुण मान

मान वर्णन
auto डिफ़ॉल्ट मान
size मास्क इमेज का आकार निर्दिष्ट करें, px, em जैसे इकाइयों का उपयोग कर सकते हैं, या % का उपयोग कर सकते हैं।
contain मास्क इमेज को विस्तारित करें, ताकि उसका चौड़ाई और ऊंचाई बैकर अंदर के भीतर कवर कर सके।
cover मास्क इमेज को विस्तारित करें, ताकि उसका चौड़ाई और ऊंचाई बैकर वर्तमान को कवर कर सके।
initial इस गुण को उसके डिफ़ॉल्ट मान पर सेट करें। देखें: initial
inherit इस गुण को उसके पिता एलीमेंट से विरासत में लें। देखें: inherit

तकनीकी विवरण

डिफ़ॉल्ट मान: auto
विरासतीयता: नहीं
एनीमेशन निर्माण: नहीं समर्थित। देखें:एनीमेशन संबंधी गुण
संस्करण: CSS मास्किंग मॉड्यूल लेवल 1
जेसक्रिप्ट व्याकरण: object.style.maskSize="100px 200px"

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

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

च्रोम एज फायरफॉक्स सफारी ऑपेरा
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-repeat प्रयोग

संदर्भ:CSS mask-type प्रयोग