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

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

სინტაქსი

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

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

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

მნიშვნელობა	აღწერა
`normal`	ნორმალური. ფერების შერევა არ გამოიყენება. რეჟიმი ნაგულისხმევად.
`multiply`	გამრავლება. ამ რეჟიმში ძირითადი ფერის მნიშვნელობა მრავლდება დაწყობილი ფერის მნიშვნელობაზე. შედეგად მიღებული ფერი ყოველთვის უფრო მუქი ფერია.
`screen`	გაღიავება. ამ რეჟიმში ძირითადი და დაწყობილი ფერის შებრუნებული მნიშვნელობები მრავლდება. როგორც შედეგად მიღებული ფერი ყოველთვის გამოიყენება უფრო ღია ფერი.
`overlay`	დაფარვა. ამ რეჟიმში ფერები მრავლდება ან ღიავდება ძირითადი ფერის მიხედვით. ორნამენტები ან ფერები ფარავს არსებულ პიქსელებს, უცვლელად ტოვებს ძირითადი ფერის მსუბუქ და მუქ მონაკვეთებს.

მაგალითი

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

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

#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 მნიშვნელობა გამრავლებაზე:

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

#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;
}

მაგალითი

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

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

#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;
}

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

თვისება background,
რომელიც წარმოადგენს შემოკლებას ფონისთვის
თვისება background-image,
რომლის საშუალებითაც ბლოკს შეიძლება მივანიჭოთ ფონური სურათი
თვისება mix-blend-mode,
რომლის საშუალებითაც შესაძლებელია ორიგინალური ფერების დაწყობა ფონურ გამოსახულებაზე
თვისება backdrop-filter,
რომელიც საშუალებას იძლევა ფილტრების დადება