पृष्ठभूमि-मिश्रण-मोड - सीएसएस-ट्रिक्स

background-blend-modeसंपत्ति परिभाषित करता है कि कैसे एक तत्व की background-imageअपनी के साथ मिश्रण होना चाहिए background-color:

.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन बैकग्राउंड-मिक्स-मोड देखें।

ऊपर के डेमो में, background-imageबाईं ओर के डिफॉल्ट में कोई मिश्रण मोड सेट नहीं है और इसलिए छवि ओवरलैप हो गई है background-color। हालाँकि दाईं ओर, ब्लेंड मोड को background-imageलाल background-colorनीचे की तरफ से संशोधित किया गया है। लेकिन ध्यान दें कि पाठ का रंग इस अतिरिक्त संपत्ति से प्रभावित नहीं हुआ है।

मूल्यों

initial: बिना सम्मिश्रण के डिफ़ॉल्ट मान।
inherit: मूल तत्व का मिश्रण मोड विरासत में मिला है।
: एक मान जो कि पृष्ठभूमि-रंग के आधार पर पृष्ठभूमि-छवि को बदल देगा।

मूल्य दिए किसी भी रूप में स्थापित किया जा सकता है (नीचे क़ौम में background-colorलाल है):

`luminosity`: पृष्ठभूमि रंग के संतृप्ति और रंग का उपयोग करते हुए शीर्ष रंग की चमक संरक्षित है।

डेमो

यहाँ उन उदाहरणों के आधार पर उन मूल्यों की व्याख्या कैसे की जाती है background-color:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन बैकग्राउंड ब्लेंड मोड देखें।

कई मिश्रण मोड जंजीर

प्रत्येक पृष्ठभूमि परत में केवल एक एकल मिश्रण मोड हो सकता है, हालांकि यदि हम उदाहरण के लिए कई रैखिक ग्रेडिएंट का उपयोग कर रहे हैं, तो उनमें से प्रत्येक का अपना मिश्रण मोड हो सकता है जो एक दिलचस्प प्रदर्शन के लिए बनाता है:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन ग्रेडर्स और बैकग्राउंड-ब्लेंड-मोड देखें।

यह पृष्ठभूमि की परत के क्रम में इन मूल्यों को सूचीबद्ध करके प्राप्त किया जाता है, जिन्हें आप प्रभावित करना चाहते हैं:

.container ( background: linear-gradient(purple 0%, red 90%), linear-gradient(to right, purple 0%, yellow 90%), url('image.jpg.webp') 30px, url('image.jpg.webp') 20px; background-blend-mode: screen, difference, lighten; )

पहली लीनियर ग्रेडिएंट में screenब्लेंड मोड होता है, उसके बाद दूसरा लीनियर ग्रेडिएंट होता है, जिसमें differenceपहला बैकग्राउंड इमेज होता है और जिस lightenपर यह लागू होता है।