मास्क-पोजीशन गुण
mask-position गुण तत्व के सापेक्ष मास्क की प्रारंभिक स्थिति सेट करता है।
यह background-position के समान ही काम करता है, लेकिन मास्क पर लागू होता है।
सिंटैक्स
सिलेक्टर {
mask-position: <position>;
}
मान
| मान | विवरण |
|---|---|
top left |
ऊपरी बाएँ कोने में (डिफ़ॉल्ट रूप से)। |
center |
तत्व के केंद्र में। |
50% 50% |
center के समान। |
right bottom |
निचले दाएँ कोने में। |
100px 200px |
पिक्सेल में विशिष्ट निर्देशांक। |
उदाहरण . मास्क को केंद्रित करना
छवि के केंद्र में हृदय मास्क:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
उदाहरण . ऊपरी बायाँ कोना
ऊपरी बाएँ कोने में मास्क:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left top;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
उदाहरण . निचला दायाँ कोना
निचले दाएँ कोने में मास्क:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: right bottom;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
उदाहरण . सटीक निर्देशांक
मास्क को सटीक निर्देशांक पर रखा गया है:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 100px 200px;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
उदाहरण . प्रतिशत स्थिति
प्रतिशत का उपयोग करके मास्क की स्थिति:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 30% 70%;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
यह भी देखें
-
mask-sizeगुण,
मास्क का आकार निर्धारित करता है -
mask-originगुण,
पोजिशनिंग के लिए रेफरेंस पॉइंट निर्धारित करता है -
maskगुण,
मास्किंग के सभी गुणों के लिए शॉर्टहैंड
