background-blend-mode ගුණය

background-blend-mode ගුණය පසුබිම් පින්තූරය පසුබිම් වර්ණය හෝ වෙනත් පින්තූර මත අතිච්ඡාදනය කිරීමේ ක්‍රමය සකස් කරයි. මෙම ගුණයේ දී කොමාවකින් වෙන් කරන ලද අගයන් ප්‍රමාණයක් ද සඳහන් කළ හැකි අතර, ඒවා එකම අනුපිළිවෙලට ප්‍රයෝජනයට ගනී. ගුණය සඳහා වන අගයන් ග්‍රැෆික් සංස්කාරකවල ප්‍රධාන අතිච්ඡාදන ක්‍රමවලට සමාන වේ.

වාක්‍ය රචනය

තෝරන්නා {
	background-blend-mode: ක්‍රම;
}

පහත වගුවේ දක්වා ඇත්තේ background-blend-mode ගුණය සඳහා වන ප්‍රධාන අගයන් වේ:

අගයන්

අගය	විස්තරය
`normal`	සාමාන්‍ය. වර්ණ මිශ්‍රණය භාවිතා නොකරයි. පෙරනිමි ක්‍රමය.
`multiply`	ගුණ කිරීම. මෙම ක්‍රමයේ දී, ප්‍රාථමික වර්ණයේ අගය අතිච්ඡාදිත වර්ණයේ අගයෙන් ගුණ කරනු ලැබේ. එහි ප්‍රතිඵලයක් වශයෙන් ලැබෙන වර්ණය සැමවිටම තද වර්ණයක් වේ.
`screen`	ආලෝකකරණය. මෙම ක්‍රමයේ දී, ප්‍රාථමික සහ අතිච්ඡාදිත වර්ණවල ප්‍රතිලෝම අගයන් ගුණ කරනු ලැබේ. ප්‍රතිඵලයක් වශයෙන් ලැබෙන වර්ණය සැමවිටම සැහැල්ලු වර්ණයක් වේ.
`overlay`	අතිච්ඡාදනය. මෙම ක්‍රමයේ දී, වර්ණ ගුණ කරනු ලැබේ හෝ ආලෝකකරණය කරනු ලැබේ එය ප්‍රාථමික වර්ණය මත අවලම්බය වේ. වටසන හෝ වර්ණ පවතින පික්සල් ආවරණය කරන අතර, ප්‍රාථමික වර්ණයේ සැහැල්ලු සහ අඳුරු කොටස් නොවෙනස්ව තබයි.

උදාහරණය

background-blend-mode ගුණයේ පෙරනිමි අගය සමඟ පින්තූරය කෙසේ පෙනේදැයි අපි බලමු:

<div id="elem"></div>

#elem {
	background-blend-mode: normal;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

උදාහරණය

දැන් අපි background-blend-mode ගුණයේ අගය ගුණ කිරීමට වෙනස් කරමු:

<div id="elem"></div>

#elem {
	background-blend-mode: multiply;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

උදාහරණය

අපගේ පින්තූරය සඳහා ආලෝකකරණ ක්‍රමය සකසමු:

<div id="elem"></div>

#elem {
	background-blend-mode: screen;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

මෙයද බලන්න

background ගුණය,
පසුබිම සඳහා කෙටි ගුණයක් වන
background-image ගුණය,
එහි ආධාරයෙන් බ්ලොක් එකකට පසුබිම් පින්තූරයක් නියම කළ හැකිය
mix-blend-mode ගුණය,
එහි ආධාරයෙන් මූලාරම්භක වර්ණ පසුබිම් පින්තූරය මත අතිච්ඡාදනය කළ හැකිය
backdrop-filter ගුණය,
එය අනුකාරක අතිච්ඡාදනය කිරීමට ඉඩ සලසයි