CSS mix-blend-mode प्रयोग

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

mix-blend-mode गुण एलिमेंट के सामग्री को किस तरह उसके सीधे पैर के पृष्ठभूमि से मिश्रित करने का निर्देश देता है。

और देखें:

CSS संदर्भ पुस्तका:सीएसएस बैकग्राउंड-ब्लेंड-मोड गुण

उदाहरण

लाल पृष्ठभूमि वाला कंटेनर और इस लाल कंटेनर के साथ मिश्रित इमेज (डार्क):

.container {
  background-color: red;
}
.container img {
  mix-blend-mode: darken;
}

आप खुद सबसे प्रयोग करें

इस पृष्ठ के नीचे अधिक TIY उदाहरण पा सकते हैं。

CSS व्याकरण

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

गुण मूल्य

मूल्य वर्णन
normal यह मूलभूत मूल्य है। मिक्स ब्लैंड मोड को नॉर्मल सेट करें。
मल्टीप्लाय मिक्स ब्लैंड मोड को मल्टीप्लाय सेट करें。
स्क्रीन मिक्स ब्लैंड मोड को स्क्रीन सेट करें。
ओवरले मिक्स ब्लैंड मोड को ओवरले सेट करें。
डार्केन मिक्स ब्लैंड मोड को डार्केन सेट करें。
लाइटेन मिक्स ब्लैंड मोड को लाइटेन सेट करें。
कलर-डॉज मिक्स ब्लैंड मोड को कलर-डॉज सेट करें。
कलर-बर्न मिक्स ब्लैंड मोड को कलर-बर्न सेट करें。
डिफरेंस मिक्स ब्लैंड मोड को डिफरेंस सेट करें。
एक्सक्लूज़न मिक्स ब्लैंड मोड को एक्सक्लूज़न सेट करें。
ह्यू मिक्स ब्लैंड मोड को ह्यू सेट करें。
सैट्यूरेशन मिक्स ब्लैंड मोड को सैट्यूरेशन सेट करें。
कलर मिक्स ब्लैंड मोड को कलर सेट करें。
ल्यूमिनोसिटी मिक्स ब्लैंड मोड को ल्यूमिनोसिटी सेट करें。

तकनीकी विवरण

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

अधिक उदाहरण

उदाहरण

सभी मूल्यों का प्रदर्शन करें:

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

आप खुद सबसे प्रयोग करें

उदाहरण

mix-blend-mode का उपयोग करके रिसोन्सिव कटआउट/नॉकआउट टेक्स्ट (कटआउट टेक्स्ट) बनाएं:

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

आप खुद सबसे प्रयोग करें

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

तालिका में दिए गए नंबर इस गुण के पहले समर्थक ब्राउज़र का संस्करण निर्दिष्ट करते हैं।

च्रोम IE / एज फ़ायरफॉक्स सफारी ओपेरा
41.0 79.0 32.0 8.0 35.0