मुखौटा-छवि - सीएसएस-ट्रिक्स

एक maskतत्व का हिस्सा सीएसएस खाल में लगाया जाता है।

.el ( mask-image: url(star.svg); )

मान लें कि आपके पास एक फोटोग्राफिक पृष्ठभूमि वाला एक तत्व है, और एक मुखौटा के रूप में उपयोग करने के लिए एक काले और सफेद एसवीजी ग्राफिक है:

आप एक ही तत्व के रूप में छवि को background-imageमास्क के रूप में सेट कर सकते हैं mask-image, और कुछ इस तरह प्राप्त कर सकते हैं:

मास्क आम पृष्ठभूमि में बहुत कुछ साझा करते हैं जिसमें आप उन्हें आकार दे सकते हैं, उन्हें स्थिति दे सकते हैं, और उन्हें दोहरा सकते हैं और जैसे पृष्ठभूमि। संबंधित गुण नीचे देखें। लेकिन यहां मास्क के बारे में एक और दिलचस्प बात है जो वे पृष्ठभूमि के साथ साझा करते हैं: वे ग्रेडिएंट हो सकते हैं।

यहाँ वही बैकग्राउंड ग्राफिक है, केवल linear-gradientइसे कवर करने वाले मास्क के साथ , जो नीचे की ओर पारदर्शी पारदर्शी बनाता है जो बिल्कुल भी पारदर्शी नहीं है:

यह काम करता है क्योंकि सबसे ऊपर linear-gradientहै transparent। मैं अगर यह था कि यह काम करेगा मान लिया है | whiteसाथ ही जब तक mask-typeथा luminance, लेकिन यह मेरे लिए किसी भी ब्राउज़र में काम करने के लिए प्रतीत नहीं होता।

luminanceमास्क की बात करें , तो यह मेरे लिए JPG.webp या PNG जैसे रेखापुंज प्रारूप वाले इमेज-अस-मास्क के लिए काम नहीं करता है। अपडेट : रीडर मिचेल हॉल एक डेमो के साथ लिखता है, जहां लंबे समय के गुणों का उपयोग करने के साथ कुछ करना हो सकता है। यदि आप केवल आशुलिपि का उपयोग करते हैं तो फ़ायरफ़ॉक्स इस अवधारणा का समर्थन करता है।

लेकिन अल्फा मास्क ठीक काम करने लगते हैं। के रूप में रेखापुंज ग्राफिक्स कि वास्तविक अल्फा पारदर्शिता का उपयोग करें। इस कदर:

और बस एक बिंदु साबित करने के लिए, एक रंग एनीमेशन जिसे आप मास्क के माध्यम से देख सकते हैं:

mask-imageसंपत्ति भी एसवीजी तत्वों के अंदर सीधे इस्तेमाल किया जा सकता है। जैसे इस अण्डाकार मास्क की जांच करें जिसमें एक धुंधला फिल्टर भी है:

यह थोड़े लगता है कि आप उस एसवीजी मास्क को झपकी ले सकते हैं और इसे अन्य तत्वों के साथ लागू कर सकते हैं mask-image: url(#mask);लेकिन मुझे नहीं लगता कि वास्तव में काम करता है। यह केवल एसवीजी के भीतर काम करता है, और एसवीजी के बाहर उपयोग किए जाने पर एक छवि को पूरी तरह से मिटाने का एक बुरा पक्ष प्रभाव होता है।