मास्क-साइज गुण

mask-size गुण मास्क छवि का आकार सेट करता है। पिक्सेल/प्रतिशत में विशिष्ट आकार निर्धारित कर सकते हैं या कीवर्ड cover और contain का उपयोग कर सकते हैं।

सिंटैक्स

cssसेलेक्टर {
  mask-size: auto | <length> | <percentage> | cover | contain;
}

मान

उदाहरण . cover आकार

मास्क को तत्व को पूरी तरह से ढकने के लिए स्केल किया गया है:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: cover;
  mask-repeat: no-repeat;
}

Результат:

उदाहरण . contain आकार

मास्क को तत्व में पूरी तरह से फिट होने के लिए स्केल किया गया है:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

Результат:

उदाहरण . पिक्सेल में निश्चित आकार

150×150 पिक्सेल आकार की मास्क:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

उदाहरण . प्रतिशत में आकार

मास्क तत्व की चौड़ाई का 80% और ऊँचाई का 60% घेरती है:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 80% 60%;
  mask-repeat: no-repeat;
}

Результат:

उदाहरण . अक्षों के अनुसार अलग-अलग आकार

मास्क 200px चौड़ी और 100px ऊँची:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 200px 100px;
  mask-repeat: no-repeat;
}

Результат:

यह भी देखें