बैकग्राउंड-ब्लेंड-मोड गुण

background-blend-mode गुण बैकग्राउंड रंग या अन्य छवियों पर बैकग्राउंड छवि के ब्लेंड मोड को निर्धारित करता है। इस गुण में कॉमा से अलग किए गए कई मान भी निर्दिष्ट किए जा सकते हैं, जो उसी क्रम में लागू होंगे। गुण के लिए मान ग्राफिक्स संपादकों के मुख्य मोड के समान हैं।

सिंटैक्स

cssसिलेक्टर {
  background-blend-mode: मोड;
}

तालिका में background-blend-mode गुण के मुख्य मान दर्शाए गए हैं:

मान

उदाहरण

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

html<div id="elem"></div>

css#elem {
  background-blend-mode: normal;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

उदाहरण

और अब आइए background-blend-mode गुण का मान गुणा में बदलें:

html<div id="elem"></div>

css#elem {
  background-blend-mode: multiply;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

उदाहरण

आइए हमारी छवि के लिए स्क्रीन मोड सेट करें:

html<div id="elem"></div>

css#elem {
  background-blend-mode: screen;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

यह भी देखें