mask प्रॉपर्टी

mask प्रॉपर्टी मास्किंग के सभी गुणों के लिए एक शॉर्टहैंड है और निम्नलिखित सेट करने की अनुमति देती है: मास्क इमेज, उसकी पोजीशन, साइज, ब्लेंड मोड और अन्य पैरामीटर्स।

निम्नलिखित प्रॉपर्टीज के लिए एक शॉर्टहैंड प्रॉपर्टी है: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

सिंटैक्स

cssसेलेक्टर {
  mask: [mask-image] [mask-position] / [mask-size]
        [mask-repeat] [mask-origin] [mask-clip]
        [mask-mode] [mask-composite];
}

वैल्यूज

इमेज तैयार करना

मान लें कि हमारे पास प्रकृति की एक तस्वीर है जिसे हम क्रॉप करेंगे, और हार्ट और एरो की SVG इमेज है, जिनके आकार में हम कटआउट करेंगे:

html<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">

Результат:

उदाहरण . मास्क इमेज

आइए हमारी तस्वीर पर हार्ट मास्क लगाएं:

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

css#image {
  width: 500px;
  height: 281px;
  background: red;
  mask: url("heart.svg") center/300px no-repeat;
}

Результат:

उदाहरण . मास्क की पोजीशन

ऊपरी बाएं कोने में हार्ट मास्क:

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

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

Результат:

उदाहरण . मास्क की पोजीशन

निचले दाएं कोने में हार्ट मास्क:

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

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

Результат:

उदाहरण . मास्क की पोजीशन

बाईं ओर सेंटर में हार्ट मास्क:

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

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

Результат:

उदाहरण . मास्क की पोजीशन

सेंटर में हार्ट मास्क:

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

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

Результат:

उदाहरण . मास्क की पोजीशन

बाएं से 100px और ऊपर से 200px हार्ट मास्क:

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

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

Результат:

उदाहरण . मास्क का साइज cover

cover वैल्यू मास्क को स्केल करती है ताकि यह एलिमेंट को पूरी तरह से कवर करे, अनुपात बनाए रखते हुए। यदि अनुपात मेल नहीं खाते हैं तो मास्क के किनारों को क्रॉप कर सकती है:

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

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/cover;
}

Результат:

उदाहरण . मास्क का साइज contain

contain वैल्यू मास्क को स्केल करती है ताकि यह एलिमेंट में पूरी तरह से फिट हो जाए, अनुपात बनाए रखते हुए। खाली जगह छोड़ सकती है:

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

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

Результат:

उदाहरण . मास्क का साइज

फिक्स्ड साइज मास्क के सटीक आयाम सेट करता है। उदाहरण के लिए, 50px साइज की मास्क बनाएं:

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

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

Результат:

उदाहरण . रिपीट no-repeat

no-repeat वैल्यू मास्क की रिपीट को डिसेबल करती है। मास्क निर्दिष्ट पोजीशन पर केवल एक बार दिखाई देती है:

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

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

Результат:

उदाहरण . रिपीट repeat-x

repeat-x वैल्यू मास्क को केवल हॉरिजॉन्टल एक्सिस पर रिपीट करती है:

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

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") left center / 50px repeat-x;
}

Результат:

उदाहरण . कम्पोजिशन add

add वैल्यू कई मास्क को जोड़ती है (परिणाम - सभी मास्क का यूनियन):

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

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 150px no-repeat,
    url("arrow.svg") 200px 30px / 150px no-repeat;
  mask-composite: add;
}

Результат:

उदाहरण . कम्पोजिशन intersect

intersect वैल्यू केवल मास्क के इंटरसेक्शन वाले एरिया को दिखाती है:

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

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 150px no-repeat,
    url("arrow.svg") 50px 30px / 150px no-repeat;
  mask-composite: intersect;
}

Результат:

उदाहरण . कम्पोजिशन exclude

exclude वैल्यू उन मास्क के एरिया को दिखाती है जो इंटरसेक्ट नहीं करते हैं:

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

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 150px no-repeat,
    url("arrow.svg") 50px 30px / 150px no-repeat;
  mask-composite: exclude;
}

Результат:

उदाहरण . कम्पोजिशन subtract

subtract वैल्यू पहली मास्क से दूसरी मास्क को घटाती है। उदाहरण के लिए, एक हार्ट बनाएं और उसमें से एरो को घटाएं:

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

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 250px no-repeat,
    url("arrow.svg") 170px 80px / 120px no-repeat;
    
    
  mask-composite: subtract;
}

Результат:

उदाहरण . विस्तारित रिकॉर्ड mask

mask प्रॉपर्टी, अलग-अलग घटकों के रूप में लिखी गई:

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;
  mask-origin: content-box;
  mask-clip: content-box;
  mask-mode: alpha;
  mask-composite: add;
}

Результат:

उदाहरण . इमेज के लिए SVG

मास्क के रूप में SVG एलिमेंट का उपयोग इमेज के लिए:

html<img id="image" src="image.jpg">
<svg width="0" height="0">
  <mask id="mask">
    <path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
  </mask>
</svg>

css#image {
  width: 500px;
  height: 281px;
  background: red;
  mask: url(#mask);
}

Результат:

उदाहरण . ग्रेडिएंट के लिए SVG

मास्क के रूप में SVG एलिमेंट का उपयोग ग्रेडिएंट के लिए:

html<div id="elem"></div>
<svg width="0" height="0">
  <mask id="star-mask">
    <path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
  </mask>
</svg>

css#elem {
  width: 500px;
  height: 300px;
  background: linear-gradient(45deg, red, blue);
  mask: url(#star-mask);
}

Результат:

यह भी देखें