Majina ya mix-blend-mode ya CSS

Ufafanuzi na matumizi

Kipaa cha mix-blend-mode kinasababisha uharibifu wa kiumbe na mabaki wa kina kina cha kwanza.

Tazama pia:

Kitabu cha mifano cha CSS:Mafaa ya Kina ya background-blend-mode ya Kifungu cha CSS

Mfano

Kina cha redi na picha iliyotumika kwa kusaidia kina hiki (nye):

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

Jifunze tena

Mafano ya TIY yanaokubaliwa chini ya ukurasa.

Inasikilio la CSS

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

Maana ya uendingaji

Maana Maelezo
normal Hii ni chaguo cha kuzingatia cha kufikia. Ingiza mashairi ya kuharibifu kama kawaida.
multiply Ingiza mashairi ya kuharibifu kama multiply.
screen Ingiza mashairi ya kuharibifu kama screen.
overlay Ingiza mashairi ya kuharibifu kama overlay.
darken Ingiza mashairi ya kuharibifu kama darken.
lighten Ingiza mashairi ya kuharibifu kama lighten.
color-dodge Ingiza mashairi ya kuharibifu kama color-dodge.
color-burn Ingiza mashairi ya kuharibifu kama color-burn.
difference Ingiza mashairi ya kuharibifu kama difference.
exclusion Ingiza mashairi ya kuharibifu kama exclusion.
hue Ingiza mashairi ya kuharibifu kama hue.
saturation Ingiza mashairi ya kuharibifu kama saturation.
color Ingiza mashairi ya kuharibifu kama color.
luminosity Ingiza mashairi ya kuharibifu kama luminosity.

Mifano ya ujumbe wa mifano

Chaguo cha kuzingatia: normal
Kutumia: Hapana
Uharibifu wa hali: Hakuna husababu. Tazama:Mashairi ya hali ya uharibifu.
Inasikilio la JavaScript: object.style.mixBlendMode = "darken"

Mifano mengi

Mfano

Kufaa ya kila maana:

.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;}

Jifunze tena

Mfano

Tumia mix-blend-mode kuundika text na cutout/knockout inayotumia msaada wa kifungaji kifungu (michupo wa uandishi):

.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;
}

Jifunze tena

Msaada wa kifungaji kifungu

数字 katika tablio inaonyesha na kwa ujumbe wa kuanzisha kwa sababu ya kufungua kwa kina kinachosaidia katika sababu hiyo.

Chrome IE / Edge Firefox Safari Opera
41.0 79.0 32.0 8.0 35.0