mix-blend-mode հատկությունը

mix-blend-mode հատկությունը սահմանում է գույնի խառնման ռեժիմը ֆոնային գույնի կամ ֆոնային պատկերի վրա: Հատկության արժեքները նման են գրաֆիկական խմբագրիչների հիմնական ռեժիմներին:

Շարահյուսություն

cssընտրիչ {
  mix-blend-mode: արժեքներ;
}

Աղյուսակում ներկայացված են mix-blend-mode հատկության հիմնական արժեքները.

Արժեքներ

Օրինակ

Եկեք տեսնենք, թե ինչպես կերևա պատկերը mix-blend-mode հատկության լռելայն արժեքով.

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

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

Результат:

Օրինակ

Իսկ այժմ եկեք փոխենք խառնման ռեժիմը բազմապատկման.

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

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

Результат:

Օրինակ

Եկեք mix-blend-mode հատկությանը տանք ծածկման արժեք.

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

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

Результат:

Տեսնել նաև