Īpašība mix-blend-mode

Īpašība mix-blend-mode nosaka krāsu sajaukšanas režīmu priekšplāna krāsai ar fona krāsu vai fona attēlu. Vērtības īpašībai ir līdzīgas galvenajiem režīmiem grafikas redaktoros.

Sintakse

cssselector {
  mix-blend-mode: vērtības;
}

Tabulā parādītas galvenās vērtības īpašībai mix-blend-mode:

Vērtības

Vērtība	Apraksts
`normal`	Parastā. Krāsu sajaukšana netiek izmantota. Noklusējuma režīms.
`multiply`	Reizināšana. Šajā režīmā priekšplāna krāsas vērtība tiek reizināta ar fona krāsas vērtību. Rezultējošā krāsa vienmēr ir tumšāka krāsa.
`screen`	Izgaismošana. Šajā režīmā tiek reizinātas apgrieztās priekšplāna un fona krāsu vērtības. Kā rezultējošā krāsa vienmēr tiek izmantota gaišāka krāsa.
`overlay`	Pārklājums. Šajā režīmā krāsas tiek reizinātas vai izgaismotas atkarībā no fona krāsas. Raksti vai krāsas pārklāj esošos pikseļus, atstājot nemainīgus fona krāsas gaišos un tumšos apgabalus.

Piemērs

Paskatīsimies, kā izskatīsies attēls ar īpašības mix-blend-mode noklusējuma vērtību:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: normal;
  width: 400px;
  height: 300px;
}

Результат:

Piemērs

Tagad mainīsim sajaukšanas režīmu uz reizināšanu:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: multiply;
  width: 400px;
  height: 300px;
}

Результат:

Piemērs

Uzstādīsim īpašībai mix-blend-mode pārklājuma vērtību:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: overlay;
  width: 400px;
  height: 300px;
}

Результат:

Skatiet arī

īpašība background,
kas ir saīsinājuma īpašība fonam
īpašība background-image,
ar kuras palīdzību blokam var piešķirt fona attēlu
īpašība background-blend-mode,
ar kuras palīdzību var uzklāt fona attēlu uz fona krāsas