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

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

सिंटैक्स

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

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

मान

उदाहरण

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

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

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

Результат:

उदाहरण

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

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

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

Результат:

उदाहरण

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

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

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

Результат:

यह भी देखें