मास्क-साइज गुण
mask-size गुण मास्क छवि का आकार सेट करता है। पिक्सेल/प्रतिशत में विशिष्ट आकार निर्धारित कर सकते हैं या कीवर्ड cover और contain का उपयोग कर सकते हैं।
सिंटैक्स
सेलेक्टर {
mask-size: auto | <length> | <percentage> | cover | contain;
}
मान
| मान | विवरण |
|---|---|
auto |
छवि का मूल आकार (डिफ़ॉल्ट रूप से)। |
cover |
मास्क को आनुपातिक रूप से स्केल करता है ताकि यह तत्व को पूरी तरह से ढक ले। |
contain |
मास्क को आनुपातिक रूप से स्केल करता है ताकि यह तत्व में पूरी तरह से फिट हो जाए। |
100px 50px |
पिक्सेल में विशिष्ट आकार। |
50% 100% |
तत्व के आकार के प्रतिशत में आकार। |
उदाहरण . cover आकार
मास्क को तत्व को पूरी तरह से ढकने के लिए स्केल किया गया है:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: cover;
mask-repeat: no-repeat;
}
:
उदाहरण . contain आकार
मास्क को तत्व में पूरी तरह से फिट होने के लिए स्केल किया गया है:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
:
उदाहरण . पिक्सेल में निश्चित आकार
150×150 पिक्सेल आकार की मास्क:
<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;
}
:
उदाहरण . प्रतिशत में आकार
मास्क तत्व की चौड़ाई का 80% और ऊँचाई का 60% घेरती है:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 80% 60%;
mask-repeat: no-repeat;
}
:
उदाहरण . अक्षों के अनुसार अलग-अलग आकार
मास्क 200px चौड़ी और 100px ऊँची:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px 100px;
mask-repeat: no-repeat;
}
:
यह भी देखें
-
mask-positionगुण,
मास्क की स्थिति निर्धारित करता है -
mask-repeatगुण,
मास्क की पुनरावृत्ति निर्धारित करता है -
maskगुण,
मास्किंग के सभी गुणों के लिए संक्षिप्त रूप
