თვისება background-blend-mode

თვისება background-blend-mode ადგენს ფონური გამოსახულების დაწყობის რეჟიმს ფონის ფერზე ან სხვა გამოსახულებებზე. ამ თვისებაში ასევე შესაძლებელია მრავალი მნიშვნელობის მითითება მძიმით გამოყოფილი, რომლებიც გამოყენებული იქნება იმავე თანმიმდევრობით. თვისების მნიშვნელობები ანალოგიურია გრაფიკული რედაქტორების ძირითადი რეჟიმებისა.

სინტაქსი

cssსელექტორი {
  background-blend-mode: რეჟიმები;
}

ცხრილში წარმოდგენილია ძირითადი მნიშვნელობები თვისებისთვის background-blend-mode:

მნიშვნელობები

მაგალითი

შევხედოთ, როგორ გამოიყურება გამოსახულება თვისების background-blend-mode ნაგულისხმევი მნიშვნელობით:

html<div id="elem"></div>

css#elem {
  background-blend-mode: normal;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

მაგალითი

ახლა კი შევცვალოთ თვისების background-blend-mode მნიშვნელობა გამრავლებაზე:

html<div id="elem"></div>

css#elem {
  background-blend-mode: multiply;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

მაგალითი

დავაყენოთ ჩვენი გამოსახულებისთვის გაღიავების რეჟიმი:

html<div id="elem"></div>

css#elem {
  background-blend-mode: screen;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

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