mix-blend-mode ගුණාංගය

mix-blend-mode ගුණාංගය පසුබිමේ වර්ණය හෝ පසුබිම් රූපය මත මූලික වර්ණය මිශ්‍ර කිරීමේ ප්‍රකාරය නියම කරයි. ගුණාංගය සඳහා අගයන් ග්‍රැෆික් සංස්කාරකවල මූලික ප්‍රකාරවලට සමාන වේ.

වාක්‍ය රචනය

cssතෝරන්නා {
  mix-blend-mode: අගයන්;
}

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

අගයන්

උදාහරණය

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

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: normal;
  width: 400px;
  height: 300px;
}

Результат:

උදාහරණය

දැන් අපි මිශ්‍ර කිරීමේ ප්‍රකාරය ගුණ කිරීමට වෙනස් කරමු:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: multiply;
  width: 400px;
  height: 300px;
}

Результат:

උදාහරණය

mix-blend-mode ගුණාංගයට අතිපිහිත අගය ලබා දෙමු:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: overlay;
  width: 400px;
  height: 300px;
}

Результат:

මෙයද බලන්න