background-blend-mode ပိုင်ဆိုင်မှု

background-blend-mode ပိုင်ဆိုင်မှုသည် နောက်ခံပုံရိပ်ကို နောက်ခံအရောင် သို့မဟုတ် အခြားပုံရိပ်များပေါ်သို့ ပေါင်းစပ်သည့်နည်းလမ်းကို သတ်မှတ်ပေးသည်။ ဤပိုင်ဆိုင်မှုတွင် တန်ဖိုးများစွာကို ကော်မာဖြင့်ခွဲ၍ သတ်မှတ်နိုင်ပြီး၊ ထိုတန်ဖိုးများကို စာရင်းထဲမှ အစဉ်အတိုင်း အသုံးပြုမည်ဖြစ်သည်။ ပိုင်ဆိုင်မှုအတွက် တန်ဖိုးများမှာ ဂရပ်ဖစ်တည်းဖြတ်ရေးဆော့ဝဲများ၏ အဓိက ပေါင်းစပ်နည်းလမ်းများနှင့် ဆင်တူသည်။

ဝါကျဖွဲ့ပုံ

cssselector {
  background-blend-mode: modes;
}

အောက်ပါဇယားတွင် 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;
}

Результат:

ဆက်လက်ဖတ်ရှုရန်