CSS మిక్స్-బ్లెండ్-మోడ్ అట్రిబ్యూట్

నిర్వచనం మరియు వినియోగం

mix-blend-mode అంశం నిర్ణయిస్తుంది ఎలా సంకేతం యొక్క సంఘటన సాధారణ ప్రక్రియా సంబంధిత బ్యాక్గ్రౌండ్తో మిళితం అవుతుంది.

మరియు ఈ కి సందర్శించండి:

CSS సూచనాల పుస్తకం:CSS background-blend-mode అట్రిబ్యూట్

ఉదాహరణ

ఎరుపు బ్యాక్గ్రౌండ్ కలిగిన కంటైనర్ మరియు ఈ ఎరుపు కంటైనర్తో మిళితం చేసిన చిత్రం (కాలర్ బర్న్ కారణంగా ముదురుగా ఉంటుంది):

.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 ఇది అప్రమేయ విలువ. మిక్స్ బ్లెండ్ మోడ్ ను సాధారణంగా సెట్ చేయండి.
multiply మిక్స్ బ్లెండ్ మోడ్ ను మల్టిప్లై కి సెట్ చేయండి.
screen మిక్స్ బ్లెండ్ మోడ్ ను స్క్రీన్ కి సెట్ చేయండి.
overlay మిక్స్ బ్లెండ్ మోడ్ ను ఓవర్లే కి సెట్ చేయండి.
darken మిక్స్ బ్లెండ్ మోడ్ ను డార్కెన్కి సెట్ చేయండి.
lighten మిక్స్ బ్లెండ్ మోడ్ ను లైటెన్కి సెట్ చేయండి.
color-dodge మిక్స్ బ్లెండ్ మోడ్ ను కలర్ డాజ్న్కి సెట్ చేయండి.
color-burn మిక్స్ బ్లెండ్ మోడ్ ను కలర్ బర్న్కి సెట్ చేయండి.
difference మిక్స్ బ్లెండ్ మోడ్ ను డిఫెరెన్స్కి సెట్ చేయండి.
exclusion మిక్స్ బ్లెండ్ మోడ్ ను ఎక్స్క్లూజన్కి సెట్ చేయండి.
hue మిక్స్ బ్లెండ్ మోడ్ ను హ్యూకి సెట్ చేయండి.
saturation మిక్స్ బ్లెండ్ మోడ్ ను స్యాట్యురేషన్కి సెట్ చేయండి.
color మిక్స్ బ్లెండ్ మోడ్ ను కలర్కి సెట్ చేయండి.
luminosity మిక్స్ బ్లెండ్ మోడ్ ను ల్యూమినోసిటీకి సెట్ చేయండి.

సాంకేతిక వివరాలు

అప్రమేయ విలువ: 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;}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ

మిక్స్ బ్లెండ్ మోడ్ ఉపయోగించి రెస్పాన్సివ్ కటౌట్/నాకౌట్ టెక్స్ట్ (కటౌట్ టెక్స్ట్) సృష్టించండి:

.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