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 ගුණාංගය,
එහි ආධාරයෙන් පසුබිම් රූපයක් පසුබිම් වර්ණය මත තැබිය හැකිය