CSS mask-position प्रभाव

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

mask-position गुण छाया चित्र के आरंभिक स्थान को (छाया स्थान क्षेत्र के अनुसार) निर्धारित करता है。

सूचना:डिफ़ॉल्ट में, छाया चित्र एलीमेंट के बांधने के कोने में स्थापित होता है और एक-एक और अनुक्रमात्मक रूप से अधिकारिता के रूप में दोहराया जाता है。

उदाहरण

उदाहरण 1

छाया लेने के चित्र को केंद्र में स्थापित करें:

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

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

उदाहरण 2

छाया लेने के चित्र को दायाँ नीचे कोने में स्थापित करें:

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

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

CSS व्याकरण

mask-position: value;

गुण मान

मान वर्णन
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
 यदि केवल एक शब्द दिया गया है, तो दूसरा मान "center" होगा。
x% y%

पहला मान अनुक्रमात्मक स्थान है, दूसरा मान अनुक्रमात्मक स्थान है。

बांधने के कोने हैं 0% 0%। दायाँ नीचे कोने हैं 100% 100%।

यदि केवल एक मान दिया गया है, तो दूसरा मान 50% होगा。

डिफ़ॉल्ट मान है: 0% 0%
xpos ypos

पहला मान अनुक्रमात्मक स्थान है, दूसरा मान अनुक्रमात्मक स्थान है。

बांधने के कोने हैं 0 0। इकाई पिक्सल (0px 0px) या किसी अन्य CSS इकाई हो सकती है。

यदि केवल एक मान दिया गया है, तो दूसरा मान 50% होगा。

प्रतिशत (%), और स्थान को मिलाने की जाँच की जा सकती है。
initial इस गुण को उसके डिफ़ॉल्ट मान पर सेट करें। देखें initial।
inherit इस गुण को उसके माता एलीमेंट से विरासत करें। देखें inherit।

तकनीकी विवरण

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

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

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

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

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

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