CSS background-blend-mode အချက်အလက်
- 上一页 background-attachment
- 下一页 background-clip
အသုံးပြုခြင်း နှင့် အသုံးချက်
background-blend-mode အချက်အလက် ကို ဖော်ပြထားသည် နောက်ခံ ပုံ တစ်ပုံစံ (အရောင် နှင့်/သို့မဟုတ် ပုံများ)
အခြား ကိုးကားချက်
CSS အပြောအခြင်CSS 背景
အကျိုးသတ်မှတ်
နောက်ခံ ပုံများ ပေါင်းစပ်စက်စက် အပေါ်မှူး အစား ပြောင်းလဲပါ
div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
ပြင်ဘားပေါ်တွင် အခြား TIY အမျိုးမျိုး ကို လေ့လာနိုင်ပါ
CSS အဘိသာ
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
အချက်အလက်
| အတ္ထုပတ္တိ | ဖော်ပြ |
|---|---|
| normal | မည်သည်မဆို သတ်မှတ်ထားသော ပေါင်းစပ်စက်စက် အစား ပြောင်းလဲပါ |
| multiply | အဆိုပါ သတ်မှတ်ထားသော ပေါင်းစပ်စက်စက် အစား ပြောင်းလဲပါ |
| screen | အဆိုပါ သတ်မှတ်ထားသော ပေါင်းစပ်စက်စက် အစား ပြောင်းလဲပါ |
| overlay | အဆိုပါ သတ်မှတ်ထားသော ပေါင်းစပ်စက်စက် အစား ပြောင်းလဲပါ |
| darken | အဆိုပါ သတ်မှတ်ထားသော ပေါင်းစပ်စက်စက် အစား ပြောင်းလဲပါ |
| lighten | အဆိုပါ သတ်မှတ်ထားသော ပေါင်းစပ်စက်စက် အပေါ်မှူး အစား ပြောင်းလဲပါ |
| color-dodge | ပြန်လည်တည်ရှိခြင်း အချက်အလက် ကို color-dodge（အရောင်ကန်းခြင်း）အဖြစ် သတ်မှတ်ပါ |
| saturation | ပြန်လည်တည်ရှိခြင်း အချက်အလက် ကို saturation（အရောင်အရှိန်）အဖြစ် သတ်မှတ်ပါ |
| color | ပြန်လည်တည်ရှိခြင်း အချက်အလက် ကို color（အရောင်）အဖြစ် သတ်မှတ်ပါ |
| luminosity | ပြန်လည်တည်ရှိခြင်း အချက်အလက် ကို luminosity（အရောင်သတ္တိ）အဖြစ် သတ်မှတ်ပါ |
နည်းပါးစွာ
| ပုံစံ | normal |
|---|---|
| ကြိုးစားအားပေး | မဟုတ် |
| အသံလုံ� ဖန်တီးခြင်း | မမြတ်တော်မူသည်။ ကျမ်းကို လေ့လာပါအသံလုံး အချက်အလက်。 |
| ပုံစံ | CSS3 |
| JavaScript ဘွတ်အရာ | object.style.backgroundBlendMode="screen" |
ပိုမိုသော အကျိုးသတ်မှတ်
အကျိုးသတ်မှတ်
ပြန်လည်တည်ရှိခြင်း အချက်အလက် ကို "multiply" အဖြစ် သတ်မှတ်ပါ
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: multiply;
}
အကျိုးသတ်မှတ်
ပြန်လည်တည်ရှိခြင်း အချက်အလက် ကို "screen" အဖြစ် သတ်မှတ်ပါ
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: screen;
}
အကျိုးသတ်မှတ်
ပြန်လည်တည်ရှိခြင်း အချက်အလက် ကို "overlay" အဖြစ် သတ်မှတ်ပါ
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: overlay;
}
အကျိုးသတ်မှတ်
ပြန်လည်တည်ရှိခြင်း အချက်အလက် ကို "darken" အဖြစ် သတ်မှတ်ပါ
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;
}
အကျိုးသတ်မှတ်
ပြန်လည်တည်ရှိခြင်း အချက်အလက် ကို "color" အဖြစ် သတ်မှတ်ပါ
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color;
}
အကျိုးသတ်မှတ်
ပြန်လည်တည်ရှိခြင်း အချက်အလက် ကို "luminosity" အဖြစ် သတ်မှတ်ပါ
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}
အကျိုးသတ်မှတ်
ပြန်လည်တည်ရှိခြင်း အချက်အလက် ကို "normal" အဖြစ် သတ်မှတ်ပါ
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: normal;
}
ဘွတ် အထောက်အပံ့
ထိုအရာများတွင် အကြောင်းအရာသတ်မှတ်ထားသော ဘွတ်ပေါင်း သည် အလိုအရ အထောက်အပံ့သည့် ဘွတ်အသုံးပြုခြင်း အပေါ် သတ်မှတ်ထားသော ဘွတ်အမှတ် ဖြစ်သည်。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 35.0 | 79.0 | 30.0 | 7.1 | 22.0 |
- 上一页 background-attachment
- 下一页 background-clip
