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қасиеті