CSS နောက်ခံ-ရုပ်ပုံ ပိုင်ဆိုင်မှု
ဥပမာ
<body> ဒြပ်စင်အတွက် နောက်ခံပုံတစ်ခု သတ်မှတ်ပါ-
body {
background-image: url("paper.gif");
background-color: #cccccc;
}
ဥပမာ
<body> ဒြပ်စင်အတွက် နောက်ခံပုံနှစ်ခုကို သတ်မှတ်ပါ-
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-color: #cccccc;
}
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ပိုင်ဆိုင်မှု သည် background-imageအစိတ်အပိုင်းတစ်ခုအတွက် တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော နောက်ခံပုံများကို သတ်မှတ်ပေးသည်။
မူရင်းအားဖြင့်၊ နောက်ခံပုံတစ်ပုံကို ဒြပ်စင်တစ်ခု၏ ဘယ်ဘက်အပေါ်ထောင့်တွင် ထားရှိကာ ဒေါင်လိုက်နှင့် အလျားလိုက် နှစ်ခုစလုံးကို ထပ်ခါတလဲလဲ ပြုလုပ်ထားသည်။
အကြံပြုချက်- ဒြပ်စင်တစ်ခု၏နောက်ခံသည် padding နှင့် border (သို့သော်အနားသတ်မဟုတ်ပါ) အပါအဝင် ဒြပ်စင်၏ စုစုပေါင်းအရွယ်အစားဖြစ်သည်။
အကြံပြုချက်- ပုံသည် မရနိုင်ပါက အသုံးပြုရန် နောက်ခံအရောင် ကို အမြဲတမ်း သတ်မှတ် ပါ။
| မူလတန်ဖိုး: | မရှိ |
|---|---|
| အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
| သက်ဝင်လှုပ်ရှားနိုင်သော | မဟုတ်ဘူး ကာတွန်း အကြောင်းဖတ်ပါ။ |
| ဗားရှင်း- | CSS3 တွင် CSS1 + တန်ဖိုးအသစ်များ |
| JavaScript syntax- | အရာဝတ္ထု .style.backgroundImage="url(img_tree.gif)" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
| Property | |||||
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
မှတ်ချက်- IE8 နှင့် အစောပိုင်းတွင် နောက်ခံပုံအများအပြားကို မပံ့ပိုးပါ။
CSS Syntax
background-image: url|none|initial|inherit;
အိမ်ခြံမြေတန်ဖိုးများ
| Value | Description |
|---|---|
| url('URL') | The URL to the image. To specify more than one image, separate the URLs with a comma |
| none | No background image will be displayed. This is default |
| conic-gradient() | Sets a conic gradient as the background image. Define at least two colors |
| linear-gradient() | Sets a linear gradient as the background image. Define at least two colors (top to bottom) |
| radial-gradient() | Sets a radial gradient as the background image. Define at least two colors (center to edges) |
| repeating-conic-gradient() | Repeats a conic gradient |
| repeating-linear-gradient() | Repeats a linear gradient |
| repeating-radial-gradient() | Repeats a radial gradient |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
နောက်ထပ် ဥပမာများ
ဥပမာ
<body> ဒြပ်စင်အတွက် နောက်ခံပုံနှစ်ခုကို သတ်မှတ်သည်။ ပထမပုံကို တစ်ကြိမ်သာ ပေါ်လာပါစေ (ထပ်မထပ်ဘဲ) နှင့် ဒုတိယပုံကို ထပ်ခါထပ်ခါ လုပ်ပါ ။
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-repeat: no-repeat, repeat;
background-color: #cccccc;
}
ဥပမာ
"သူရဲကောင်း" ရုပ်ပုံဖန်တီးရန် မတူညီသော နောက်ခံဂုဏ်သတ္တိများကို အသုံးပြုပါ-
.hero-image {
background-image: url("photographer.jpg"); /* The
image used */
background-color: #cccccc; /* Used if the image is
unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
ဥပမာ
<div> ဒြပ်စင်အတွက် နောက်ခံပုံအဖြစ် မျဉ်းဖြောင့်-အရောင်ခြယ်မှု (အရောင်နှစ်ရောင်) ကို သတ်မှတ်သည်-
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
linear-gradient(red, yellow);
}
ဥပမာ
<div> ဒြပ်စင်အတွက် နောက်ခံပုံအဖြစ် မျဉ်းဖြောင့်-အရောင်ခြယ်မှု (အရောင်သုံးရောင်) သတ်မှတ်သည်-
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
linear-gradient(red, yellow, green);
}
ဥပမာ
ထပ်ခါတလဲလဲ-linear-gradient() လုပ်ဆောင်ချက်ကို linear gradient များကို ထပ်ခါတလဲလဲရန် အသုံးပြုသည်-
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}
ဥပမာ
<div> ဒြပ်စင်အတွက် နောက်ခံပုံအဖြစ် အချင်း-အရောင်ခြယ်မှု (အရောင်နှစ်ခု) ကို သတ်မှတ်သည်-
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
radial-gradient(red, yellow);
}
ဥပမာ
<div> ဒြပ်စင်အတွက် နောက်ခံပုံအဖြစ် အချင်း-အရောင်ခြယ်မှု (အရောင်သုံးရောင်) ကို သတ်မှတ်သည်-
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
radial-gradient(red, yellow, green);
}
ဥပမာ
ထပ်ခါတလဲလဲ-radial-gradient() လုပ်ဆောင်ချက်ကို radial gradient များကို ထပ်ခါတလဲလဲလုပ်ရန်အတွက် အသုံးပြုသည်-
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
repeating-radial-gradient(red, yellow 10%, green 20%);
}
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS နောက်ခံ ၊ CSS နောက်ခံများ (အဆင့်မြင့်) ၊ CSS Gradiments
HTML DOM ရည်ညွှန်းချက်- နောက်ခံပုံ ပိုင်ဆိုင်မှု