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 հատկությունը,
որի օգնությամբ կարելի է ֆոնային պատկերը դնել ֆոնային գույնի վրա