Mix-blend-mode xassəsi

mix-blend-mode xassəsi mənbə rənginin arxa fon rəngi və ya arxa fon şəkli üzərində qarışıq rejimini təyin edir. Xassə üçün dəyərlər qrafik redaktorların əsas rejimlərinə bənzərdir.

Sintaksis

cssselektor {
  mix-blend-mode: deyerler;
}

Cədvəldə mix-blend-mode xassəsi üçün əsas dəyərlər təqdim olunub:

Dəyərlər

Dəyər	Təsvir
`normal`	Normal. Rəng qarışığı istifadə olunmur. Standart rejim.
`multiply`	Vurma. Bu rejimdə əsas rəngin dəyəri qarışıq rəngin dəyərinə vurulur. Nəticədə çıxan rəng həmişə daha tünd bir rəng olur.
`screen`	Ağartma. Bu rejimdə əsas və qarışıq rənglərin tərs dəyərləri bir-birinə vurulur. Nəticə rəngi kimi həmişə daha açıq rəng istifadə olunur.
`overlay`	Örtmə. Bu rejimdə rənglər əsas rəngdən asılı olaraq vurulur və ya ağardılır. Naxışlar və ya rənglər mövcud piksellərin üzərini örtərək, əsas rəngin açıq və tünd sahələrini dəyişməz qoyur.

Nümunə

Gəlin mix-blend-mode xassəsinin standart dəyəri ilə şəklin necə görünəcəyinə baxaq:

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

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

Результат:

Nümunə

İndi isə gəlin qarışıq rejimini vurma olaraq dəyişək:

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

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

Результат:

Nümunə

Gəlin mix-blend-mode xassəsinə örtmə dəyərini təyin edək:

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

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

Результат:

Həmçinin bax

fon üçün qısa xassə olan background xassəsi
bloka arxa fon şəkli təyin etmək üçün istifadə olunan background-image xassəsi
arxa fon şəklini arxa fon rəngi üzərinə qarışdırmaq üçün istifadə olunan background-blend-mode xassəsi