मिक्स-ब्लेंड-मोड गुण

mix-blend-mode गुण स्रोत रंग को पृष्ठभूमि के रंग या पृष्ठभूमि छवि पर मिश्रित करने का मोड निर्धारित करता है। गुण के लिए मान ग्राफिक संपादकों के मुख्य मोड के समान हैं।

सिंटैक्स

सिलेक्टर {
	mix-blend-mode: मान;
}

तालिका में mix-blend-mode गुण के लिए मुख्य मान प्रस्तुत किए गए हैं:

मान

मान	विवरण
`normal`	सामान्य। रंगों का मिश्रण उपयोग नहीं किया जाता है। डिफ़ॉल्ट मोड।
`multiply`	गुणा। इस मोड में, मुख्य रंग का मान संयुक्त रंग के मान से गुणा किया जाता है। परिणामी रंग हमेशा एक गहरा रंग होता है।
`screen`	हल्का करना। इस मोड में, मुख्य और संयुक्त रंग के विपरीत मानों को आपस में गुणा किया जाता है। परिणामी रंग के रूप में हमेशा एक हल्का रोग लागू होता है।
`overlay`	ओवरले। इस मोड में, रंगों को मुख्य रंग के आधार पर गुणा या हल्का किया जाता है। पैटर्न या रंग मौजूदा पिक्सेल को ढक लेते हैं, मुख्य रोग के हल्के और गहरे क्षेत्रों को अपरिवर्तित छोड़ते हुए।

उदाहरण

आइए देखें कि mix-blend-mode गुण के डिफ़ॉल्ट मान के साथ छवि कैसी दिखेगी:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: normal;
	width: 400px;
	height: 300px;
}

उदाहरण

और अब आइए मिश्रण मोड को गुणा में बदलें:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: multiply;
	width: 400px;
	height: 300px;
}

उदाहरण

आइए mix-blend-mode गुण को ओवरले मान दें:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: overlay;
	width: 400px;
	height: 300px;
}

यह भी देखें

background गुण,
जो पृष्ठभूमि के लिए एक संक्षिप्त गुण है
background-image गुण,
जिसकी सहायता से किसी ब्लॉक को पृष्ठभूमि छवि दी जा सकती है
background-blend-mode गुण,
जिसकी सहायता से पृष्ठभूमि छवि को पृष्ठभूमि के रंग पर मिश्रित किया जा सकता है