मिश्रण-मिश्रण-मोड - सीएसएस-ट्रिक्स

mix-blend-modeसंपत्ति कैसे एक तत्व की सामग्री इसकी पृष्ठभूमि के साथ मिश्रण चाहिए परिभाषित करता है। उदाहरण के लिए, एक का पाठ

दिलचस्प तरीकों से इसके पीछे की पृष्ठभूमि के साथ मिश्रण कर सकते हैं।

.blend ( mix-blend-mode: exclusion; )

उदाहरण के ऊपर सामग्री को संशोधित किया गया है mix-blend-modeताकि पाठ के रंगों को इसकी पृष्ठभूमि से बाहर रखा जाए। यह इस संपत्ति के लिए कई मूल्यों में से एक है।

Chrome 58+ के साथ एक समस्या है जहां mix-blend-modeपारदर्शी पर सेट किए गए तत्वों पर रेंडर नहीं किया जाएगा । क्रोम में अंक 711955 के रूप में टिकट दिया गया है, जिसे इस लेखन के समय सौंपा गया है। इस बीच, शरीर के तत्व को एक सफेद (या वास्तव में, किसी भी) पृष्ठभूमि रंग आवंटित करने के लिए एक सरल तय है।

मूल्यों

• initial: प्रॉपर्टी की डिफ़ॉल्ट सेटिंग जो ब्लेंड मोड सेट नहीं करती है।
• inherit: एक तत्व अपने मूल तत्व से मिश्रण मोड को इनहेरिट करेगा।
• unset: एक तत्व से वर्तमान मिश्रण मोड को निकालता है।
• : यह एक ब्लेंड मोड के नीचे की विशेषता है:
• normal: यह विशेषता जो भी सम्मिश्रण लागू नहीं होती है।
• multiply: तत्व को पृष्ठभूमि से गुणा किया जाता है और पृष्ठभूमि के रंग को बदल देता है। परिणामी रंग हमेशा पृष्ठभूमि जितना गहरा होता है।
• screen: पृष्ठभूमि और सामग्री को गुणा करता है और फिर परिणाम को पूरक करता है। यह सामग्री में परिणाम होगा जो की तुलना में उज्जवल है background-color।
• ओवरले: पृष्ठभूमि रंग के आधार पर सामग्री को गुणा या स्क्रीन करता है। यह हार्ड-लाइट ब्लेंड मोड का विलोम है।
• अंधेरा: पृष्ठभूमि को उस सामग्री से बदल दिया जाता है जहां सामग्री अधिक गहरा है, अन्यथा, इसे वैसे ही छोड़ दिया जाता है जैसा कि यह था।
• lighten: पृष्ठभूमि को उस सामग्री से बदल दिया जाता है जहां सामग्री हल्की होती है।
• color-dodge: यह विशेषता सामग्री के रंग को प्रतिबिंबित करने के लिए पृष्ठभूमि के रंग को उज्ज्वल करती है।
• color-burn: यह सामग्री के प्राकृतिक रंग को प्रतिबिंबित करने के लिए पृष्ठभूमि को गहरा करता है।
• hard-light: सामग्री के रंग के आधार पर यह विशेषता स्क्रीन करेगी या इसे गुणा करेगी।
• soft-light: सामग्री के रंग के आधार पर यह इसे हल्का या हल्का करेगा।
• difference: यह दो रंगों के गहरे रंग को सबसे हल्के रंग से घटाता है।
• exclusion: differenceलेकिन इसके विपरीत कम विपरीत।
• hue: पृष्ठभूमि की संतृप्ति और चमक के साथ संयुक्त सामग्री के रंग के साथ एक रंग बनाता है।
• saturation: पृष्ठभूमि के रंग और चमक के साथ संयुक्त सामग्री की संतृप्ति के साथ एक रंग बनाता है।
• color: रंग और सामग्री की संतृप्ति और पृष्ठभूमि की चमक के साथ एक रंग बनाता है।
• luminosity: सामग्री की चमक और पृष्ठभूमि के रंग और संतृप्ति के साथ एक रंग बनाता है। यह colorगुण का विलोम है ।

यह ध्यान देने योग्य है कि इसके अलावा एक ब्लेंड मोड सेट करने से normalएक नया स्टैकिंग संदर्भ उत्पन्न होगा, जिसे तब स्टैकिंग संदर्भ के साथ मिश्रित किया जाना चाहिए जिसमें तत्व शामिल है।

इन मूल्यों का प्रभाव नीचे डेमो में दिखाया गया है:

अधिक जानकारी

• सीएसएस ब्लेंड मोड्स की मूल बातें
• MDN पर मिश्रण-मिश्रण-मोड
• W3C पर मिक्स-मिक्स-मोड
• सीएसएस ब्लेंड मोड डेमो का एक संग्रह
• CSS Blend Modes को जानना

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
४१	32	नहीं न	। ९	टी.पी.

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	14.0-14.4