თვისება 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,
რომლის საშუალებითაც შესაძლებელია ფონის გამოსახულების ფონის ფერზე დადება