सीएसएस मुखौटा-छवि संपत्ति
उदाहरण
इमेज के लिए मास्क लेयर बनाएं:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 70%;
mask-size: 70%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
mask-image
संपत्ति एक तत्व के लिए मुखौटा परत के रूप में उपयोग की जाने वाली छवि को निर्दिष्ट करती है ।
टिप: CSS में लीनियर और रेडियल ग्रेडिएंट्स का उपयोग मास्क इमेज के रूप में भी किया जा सकता है।
डिफ़ॉल्ट मान: | कोई नहीं |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | नहीं। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | CSS3 |
जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.maskImage="url(star.svg)" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
-वेबकिट के बाद की संख्याएं- उपसर्ग के साथ काम करने वाले पहले संस्करण को निर्दिष्ट करें।
Property | |||||
---|---|---|---|---|---|
mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
सीएसएस सिंटेक्स
mask-image: none|image|url|initial|inherit;
सम्पत्ति की कीमत
Value | Description |
---|---|
none | This is default |
image | An image to use as the mask layer |
url | An url reference to an image or an SVG <mask> element |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
और ज्यादा उदाहरण
उदाहरण
रैखिक और रेडियल ग्रेडिएंट वाली छवि के लिए विभिन्न मुखौटा परतें बनाएं:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black,
transparent);
}
.mask2 {
-webkit-mask-image:
radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
-webkit-mask-image: radial-gradient(black 50%, rgba(0,
0, 0, 0.5) 50%);
mask-image: radial-gradient(black 50%, rgba(0, 0,
0, 0.5));
}
उदाहरण
छवि के लिए मास्क परत बनाने के लिए SVG <mask> तत्व का उपयोग करें:
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78
160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask1)"></image>
</svg>
उदाहरण
छवि के लिए मास्क परत बनाने के लिए SVG <mask> तत्व का उपयोग करें:
<svg width="600" height="400">
<mask id="svgmask1">
<circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
<circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
<circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
संबंधित पृष्ठ
CSS संदर्भ: मास्क-मोड गुण
सीएसएस संदर्भ: मुखौटा-मूल संपत्ति
सीएसएस संदर्भ: मुखौटा-स्थिति संपत्ति
CSS संदर्भ: मास्क-रिपीट प्रॉपर्टी
सीएसएस संदर्भ: मुखौटा-आकार की संपत्ति
सीएसएस ट्यूटोरियल: सीएसएस मास्किंग