თვისება 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;
}

Результат:

იხილეთ აგრეთვე