Style background အကိုးခံ

ဒီ အကိုးခံ ကို အသုံးပြု နှင့် အသုံးပြု

background အကိုးခံ အလိုက် ရိုက်ထား သို့မဟုတ် သတ်မှတ် ပြီး နှစ်ဆယ့်ရှစ် အသုံးပြု အကိုးခံ ကို အလိုက် သတ်မှတ် နိုင်ပါသည်。

ဒါ့ဖြင့် သင်သည် အောက်ပါ အကိုးခံတွေကို စစ်ဆေး/သတ်မှတ် နိုင်ပါသည် (အခြား အဆက်အသွယ် အပေါ်လုပ်ဆောင်)

DOM အကိုးခံ CSS အကိုးခံ
backgroundAttachment background-attachment
backgroundClip background-clip
backgroundColor background-color
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize background-size

အမှတ်ပြား အချက်အလက် ကို အသုံးပြုပြီး အသုံးပြုသူ အဆင့် မပြတ် သတ်မှတ်ပါ။ အဆင့် မပြတ် သတ်မှတ်သူ အတွက် အသုံးပြုပါက ပိုကောင်းသော ကွန်ပိုင်းများ ရရှိသည်။

အခြား ကြည်းဖြူး:

CSS အခန်း:CSS နောက်ခံ

CSS3 အခန်း:CSS3 ပြင်ဆင်

CSS ပြည့်မျဉ်းကတ္တရာ:background အချက်အလက်

အမျိုးမျိုး

အခြေခံ အစားထိုး ပြင်ဆင် အပုံ:

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

ကိုယ်တိုင် စမ်းသပ်ပါ

စားပွဲ အောက်တွင် အခြား TIY အမျိုးမျိုး ရှိသည်။

ပုံစံ

ပြန်လည်သတင်း background အချက်အလက်:

object.style.background

ပြင်ဆင် background အချက်အလက်:

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

အချက်အလက် အဆင့်

ပြင်ဆင် အဆင့် ဖော်ပြ
color အစားထိုး ပြင်ဆင် အရောင် ကို သတ်မှတ်ပါ။
image အစားထိုး ပြင်ဆင် အပုံ ကို သတ်မှတ်ပါ။
repeat ပြင်ဆင် အပုံ ကြိုးစား အပိုင်းအခြား ကို သတ်မှတ်ပါ။
attachment ပြင်ဆင် အပုံ အခြေခံ သို့မဟုတ် စားပွဲ တွင် လှည့်ပြီး ရွှေ့ပြောင်းသည့် အခြေခံ ကို သတ်မှတ်ပါ။
position ပြင်ဆင် အပုံ စတင် နေရာ ကို သတ်မှတ်ပါ။
size ပြင်ဆင် အပုံ အရွယ် ကို သတ်မှတ်ပါ။
origin ပြင်ဆင် အစိုးရ အပိုင်းအခြား ကို သတ်မှတ်ပါ။
clip ပြင်ဆင် အပုံ ကို ချဲ့ချဲ့ သတ်မှတ်ပါ။
initial အချက်အလက် အဆင့် အရ အချက်အလက် ကို သတ်မှတ်ပါ။ ကျမ်းကတ္တရာ ကို ကျွန်းပြီး၍ သုံးပါ။ initial。
inherit အသုံးပြုသော အပိုင်းအခြား အစိုးရ အချက်အလက်များ ကို ထို အချက်အလက် မှ လက်ခံသည်။ ကျမ်းကတ္တရာ ကို ကျွန်းပြီး၍ သုံးပါ။ inherit。

နည်းပညာ အချက်

မျှော်လင့်သော အဆင့်: ပြင်ဆင် 0% 0% auto padding-box border-box
ပြန်လည်သတင်း: ကိုယ်စားပြု အစက္ခု၏ ပြင်ဆင် အဓိပ္ပာယ်。
CSS ပုံစံ: CSS1 + CSS3 တွင် ဘွတ်အချက်

အခြား အမျိုးမျိုး

အကြောင်း 2

ပြင်ဆင် DIV အရိပ်:

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

ကိုယ်တိုင် စမ်းသပ်ပါ

အမှတ် 3

ဘရာဇီဂီ ဘရာဇီဂီ ပြန်လည်ပြောင်းလဲပါ

document.body.style.backgroundColor = "red";

ကိုယ်တိုင် စမ်းသပ်ပါ

အမှတ် 4

ဘရာဇီဂီ ဘရာဇီဂီ ပြန်လည်ပြောင်းလဲပါ

document.body.style.backgroundImage = "url('img_tree.png')";

ကိုယ်တိုင် စမ်းသပ်ပါ

အမှတ် 5

ဘရာဇီဂီ အချက်ပြောင်းလဲပါ

document.body.style.backgroundRepeat = "repeat-y";

ကိုယ်တိုင် စမ်းသပ်ပါ

အမှတ် 6

ဘရာဇီဂီ အရေးပါ ပြောင်းလဲပါ

document.body.style.backgroundAttachment = "fixed";

ကိုယ်တိုင် စမ်းသပ်ပါ

အမှတ် 7

ဘရာဇီဂီ ပြန်လည်ပြောင်းလဲပါ

document.body.style.backgroundPosition = "top right";

ကိုယ်တိုင် စမ်းသပ်ပါ

အမှတ် 8

အခြေခံ ဘရာဇီဂီ အကိုးအချုပ် ပြန်လည်ပေးပါ

document.body.style.background;

ကိုယ်တိုင် စမ်းသပ်ပါ

ဘရာဇီဂီ ထောက်ပံ့

background ဖြစ်ပါသည် CSS1 (1996) အဖွဲ့အစည်း

အားလုံး ဘရာဇီဂီ က အပြောင်းအလဲမရှိ ထောက်ပံ့ပါသည်:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့

အစီအစဉ်

CSS3 (1999) တွင် အသစ် အကိုးအချုပ် ၃ ခု ထပ်ထည့်ခဲ့ပါသည်: