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

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

სინტაქსი

სელექტორი {
	mix-blend-mode: მნიშვნელობა;
}

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

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

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

მაგალითი

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

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

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

მაგალითი

ახლა კი შევცვალოთ შერწყმის რეჟიმი გამრავლებაზე:

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

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

მაგალითი

მივანიჭოთ თვისებას mix-blend-mode გადაფარვის მნიშვნელობა:

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

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

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

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