CSS နောက်ခံ-ရောနှော-မုဒ် ပိုင်ဆိုင်မှု
ဥပမာ
"အလင်း" ဖြစ်စေရန် နောက်ခံပုံ၏ ရောစပ်မုဒ်ကို သတ်မှတ်ပါ-
div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ပိုင်ဆိုင်မှုသည် နောက်ခံအလွှာတစ်ခုစီ ၏ background-blend-mode
ရောစပ်မှုမုဒ်ကို သတ်မှတ်သည် (အရောင်နှင့်/သို့မဟုတ် ပုံ)။
မူလတန်ဖိုး: | ပုံမှန် |
---|---|
အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
သက်ဝင်လှုပ်ရှားနိုင်သော | မဟုတ်ဘူး ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS3 |
JavaScript syntax- | အရာဝတ္ထု .style.backgroundBlendMode="screen" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
background-blend-mode | 35.0 | 79.0 | 30.0 | 7.1 | 22.0 |
CSS Syntax
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description | Play it |
---|---|---|
normal | This is default. Sets the blending mode to normal | |
multiply | Sets the blending mode to multiply | |
screen | Sets the blending mode to screen | |
overlay | Sets the blending mode to overlay | |
darken | Sets the blending mode to darken | |
lighten | Sets the blending mode to lighten | |
color-dodge | Sets the blending mode to color-dodge | |
saturation | Sets the blending mode to saturation | |
color | Sets the blending mode to color | |
luminosity | Sets the blending mode to luminosity |
နောက်ထပ် ဥပမာများ
ဥပမာ
ရောစပ်ခြင်းမုဒ်ကို "များပြားခြင်း" အဖြစ် သတ်မှတ်ပါ-
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: multiply;
}
ဥပမာ
ရောစပ်မုဒ်ကို "မျက်နှာပြင်" အဖြစ် သတ်မှတ်ပါ-
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: screen;
}
ဥပမာ
ရောစပ်မုဒ်ကို "ထပ်ဆင့်" အဖြစ် သတ်မှတ်ပါ-
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: overlay;
}
ဥပမာ
"အမှောင်" ဖြစ်စေရန် ရောစပ်မုဒ်ကို သတ်မှတ်ပါ-
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: darken;
}
ဥပမာ
ရောစပ်မုဒ်ကို "color-dodge" အဖြစ် သတ်မှတ်ပါ-
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color-dodge;
}
ဥပမာ
ရောစပ်မုဒ်ကို "saturation" အဖြစ် သတ်မှတ်ပါ-
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: saturation;
}
ဥပမာ
ရောစပ်မုဒ်ကို "အရောင်" အဖြစ် သတ်မှတ်ပါ-
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color;
}
ဥပမာ
ရောစပ်မုဒ်ကို "တောက်ပမှု" အဖြစ် သတ်မှတ်ပါ-
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}
ဥပမာ
ရောစပ်မုဒ်ကို "ပုံမှန်" အဖြစ် သတ်မှတ်ပါ-
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: normal;
}
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS နောက်ခံ