background-blend-mode ගුණය

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

වාක්‍ය රචනය

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

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

අගයන්

උදාහරණය

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

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

css#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 ගුණයේ අගය ගුණ කිරීමට වෙනස් කරමු:

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

css#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;
}

Результат:

උදාහරණය

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

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

css#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;
}

Результат:

මෙයද බලන්න