सीएसएस बैकग्राउंड-ब्लेंड-मोड एट्रिब्यूट

वर्णन और उपयोग

background-blend-mode गुण वर्णन प्रत्येक पृष्ठभूमि परत (रंग और/या इमेज) के मिश्रित मोड को निर्धारित करता है。

और देखें:

CSS शिक्षा:CSS पृष्ठभूमि

उदाहरण

पृष्ठभूमि इमेज के मिश्रित मोड को "lighten" (उज्ज्वल) के रूप से निर्दिष्ट करें:

div { 
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: lighten;
}

खुद आयात करें

आप पृष्ठ के अंत में और TIY उदाहरणों को देख सकते हैं。

CSS व्याकरण

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

गुण मूल्य

मूल्य वर्णन
normal डिफ़ॉल्ट। मिश्रित मोड को आम रूप से सेट करें。
multiply मिश्रित मोड को multiply (गुणा) रूप से सेट करें。
screen मिश्रित मोड को screen (स्क्रीन) रूप से सेट करें。
overlay मिश्रित मोड को overlay (ओवरले) रूप से सेट करें。
darken मिश्रित मोड को overlay (ओवरले) रूप से सेट करें。
lighten मिश्रित मोड को lighten (उज्ज्वल) रूप से सेट करें。
color-dodge मिश्रण मोड को color-dodge (रंग-घटाना) में सेट करें。
saturation मिश्रण मोड को saturation (संतृप्ति) में सेट करें。
color मिश्रण मोड को color (रंग) में सेट करें。
luminosity मिश्रण मोड को luminosity (चमकीलापन) में सेट करें。

तकनीकी विवरण

मूलभूत मान: normal
विरासत: नहीं
एनिमेशन निर्माण: समर्थित नहीं है। देखें:एनिमेशन संबंधी गुण。
संस्करण: CSS3
जावास्क्रिप्ट व्याकरण: object.style.backgroundBlendMode="screen"

और अधिक उदाहरण

उदाहरण

मिश्रण मोड को "multiply" नामित करें:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}

खुद आयात करें

उदाहरण

मिश्रण मोड को "screen" नामित करें:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: screen;
}

खुद आयात करें

उदाहरण

मिश्रण मोड को "overlay" नामित करें:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: overlay;
}

खुद आयात करें

उदाहरण

मिश्रण मोड को "darken" नामित करें:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

खुद आयात करें

उदाहरण

मिश्रण मोड को "color-dodge" नामित करें:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color-dodge;
}

खुद आयात करें

उदाहरण

मिश्रण मोड को "saturation" नामित करें:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: saturation;
}

खुद आयात करें

उदाहरण

मिश्रण मोड को "color" नामित करें:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color;
}

खुद आयात करें

उदाहरण

मिश्रण मोड को "luminosity" नामित करें:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: luminosity;
}

खुद आयात करें

उदाहरण

मिश्रण मोड को "normal" नामित करें:

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: normal;
}

खुद आयात करें

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

तालिका में दिए गए नंबर को पूरी तरह से समर्थन करने वाले पहले ब्राउज़र का संस्करण उल्लेख किया गया है。

Chrome Edge Firefox सैफारी ओपेरा
Chrome Edge Firefox सैफारी ओपेरा
35.0 79.0 30.0 7.1 22.0