အစားအသား အချက်အလက်

CSS အထူး ပြည့်အောက်

• CSS စစ်တမ်းအုပ်
• CSS စစ်တမ်းအသစ်
• CSS အခြေခံ စံကြမ်း
• CSS အဆင့်မြင့် စံကြမ်း
• CSS အောက်ခံ ရွေးချယ်သူ
• CSS id ရွေးချယ်သူ
• CSS အမျိုးမျိုး ရွေးချယ်သူ
• CSS ဖွဲ့စည်းပုံ
• CSS နောက်ခံ
• CSS စာရိုက်
• CSS အကြောင်း
• CSS အစားအရေး

CSS ပေါင်းစပ်

• CSS အကြီးအကျယ် အဆိုပါ
• CSS အတွင်းပိုင်း
• CSS အောက်ခံခွဲ
• CSS အတွင်းပိုင်း
• CSS အတွင်းပိုင်း ပေါင်းစပ်

CSS စီမံထုတ်ထိုး

• CSS အခြေခံ အရာ
• CSS အတွင်းပိုင်း ရွေးချယ်သူ
• CSS အခြေခံ ရွေးချယ်သူ
• CSS ပျံ့နှံ့

CSS ရှာဖွေစုံစမ်း

• CSS အကွင်း ရွေးချယ်သူ
• CSS ရွေးချယ်သူ အုပ်စု
• CSS အမျိုးမျိုး ရွေးချယ်သူ အသေးစိတ်
• CSS id ရွေးချယ်သူ အသေးစိတ်
• CSS အခြေခံ ရွေးချယ်သူ အသေးစိတ်
• CSS အောက်ခံ ရွေးချယ်သူ
• CSS အောက်ခံ အပိုင်း ရွေးချယ်သူ
• CSS အခြား အပိုင်း ရွေးချယ်သူ

ဆက်စပ် သုံးစွဲ

စာစောင်း ကို

• CodeW3C.com အရေးပါ အကိုးအကာ

CSS သည် အသံထွက် အမျိုးအစား ပြင် ပြင်ပ ပုံ ကို အသုံးပြုရန် ခွင့်ပြုပြီး အသံထွက် အမျိုးအစား အကြီးအကျယ် ကို ဖွဲ့စည်းနိုင်သည်

CSS သည် ထို အပျက်အစီး တွင် HTML ထက် အကြီးအကျယ် ရှိသည်

ပြင်ပ အမျိုးအစား

အသုံးပြုနိုင် background-color အစိတ် အစိတ် အမျိုးအစားအစိတ် အစိတ် ပြင် ကို သတ်မှတ်ရန် အစိတ် အစိတ် အမျိုးအစား ကို သတ်မှတ်ရန် ဖြစ်၍ ပုံစံ အမျိုးအစား တိုင်း အား ကစားချင်နိုင်သည်

အဆိုပါ အခြေခံ အရာသည် အစိတ် အစိတ် ပြင် ကို ရူပ်ရူပ် ဖြစ်သည်

p {background-color: gray;}

အခါတွင် ပြင်ပ အမျိုးအစား သည် အစိတ် အစိတ် အရာအတွက် ပို၍ ချို့ချိုးမှု ဖြစ်သည်ကို ဆန္ဒပြရန် အဆင်းချို့ ပို၍ ရှိသော အဆင်းချို့ ကို ထပ်ပေါင်းရန်

p {background-color: gray; padding: 20px;}

ကျွန်တော် ကျင့်ကြည်းပါ

အရာအတွက် ပြင်ပ အမျိုးအစား ကို သတ်မှတ်နိုင်ပါ၊ အားလုံး ပုံပြင် အထိ ပါ ဖြစ်၍ အင်တာ နှင့် အစား အသုံး ရှိသော အင်တာ ပုံစံ အထိ ပါ

background-color က အားကစားချင်နိုင် မဟုတ်၊ ပုံစံ အတိုင်းအတာ သည် ပြည့်အောက်မှ ဖြစ်သည်။ ပြည့်အောက် သည် အလွန် အပျိုး ရှိသည်။ ထို့ကြောင့် အစိတ် အစိတ် သည် ပြင်ပ ပုံ ကို အမှတ်ပြုခြင်း မပြုဘဲ ဖြစ်လာရင် ထိုအစိတ် အစိတ် သည် ပြင်ပ ပုံ ကို မြင်ရနိုင်ပါ

ပြင်ပ ပုံ

ပုံပြင်သို့ ပုံကို ထည့်သွင်းရန် လိုအပ်သည် background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

နောက်ခံ ပုံ အား ပြုပြင်ရန် အားလုံး ကို အားလုံး အတွက် URL အကွက် ပြုပြင်ပါ။

body {background-image: url(/i/eg_bg_04.gif);}

အများစု နောက်ခံ ပုံ သည် body အကွက် အား အသုံးပြုသည်။ သို့သော် အခြား အကွက် များ မှာ အသုံးပြုခြင်း မပါဘူး။

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

p.flower {background-image: url(/i/eg_bg_03.gif);}

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

a.radio {background-image: url(/i/eg_bg_07.gif);}

ကျွန်တော် ကျင့်ကြည်းပါ

သို့သော် သန်းခွဲ အခါ အတွက် textareas နှင့် select စသော အစားထိုး အကွက် အား နောက်ခံ ပုံ အား အသုံးပြုနိုင် သော်လည်း အချို့ အသုံးပြုသူ အချက်အလက် များ အား ကောင်းမွန်စွာ နားမလျှဲပါ။

တောင်မှာ နောက်ခံ ပုံ အား မပြုနိုင်။ အမှန်တကယ် နောက်ခံ အချက်အလက် အား အစိုးရ မည်။

နောက်ခံ ပြန်ပြန် ပြောင်းလဲ

နောက်ခံ ပုံများ အား ပြန်ပြန် ပြောင်းလဲပြီး ပြုပြင်ပါသည့် အခါ အသုံးပြုနိုင် background-repeat အကွက်

အားရွှေး အကွက် အား ပြောင်းလဲပါ။ အားရွှေး အကွက် အား ပြောင်းလဲပါ။ အားရွှေး အကွက် အား ပြောင်းလဲပါ။ အားရွှေး အကွက် အား ပြောင်းလဲပါ။

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

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

ကျွန်တော် ကျင့်ကြည်းပါ

နောက်ခံ အပ်ခြင်း

အသုံးပြုနိုင် background-position အကွက်အမြင့် ပုံများ အား နောက်ခံ အပ်ခြင်း ပြောင်းလဲပါ။

အောက်ပါ အကျိုးသတ်မှတ် အရာများ အား body အကွက် တွင် နောက်ခံ ပုံများ ကို အရှိန်ထိပ် နောက်ခံ အပ်ခြင်းကို ပြသသည်။

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

နောက်ခံ စက်ဆင်မှု အကွက် အား အရေးအချင်း ကို ပေးရန် အမျိုးမျိုးသော နည်းလမ်း ရှိသည်။ အစွဲပြုလျှင် အကြောင်းအရာများကို အသုံးပြုနိုင်သည်။ top, bottom, left, right နှင့် center တို့ဖြစ်ပါ။ အမျိုးမျိုးသော အရေးအချင်း အား အသုံးပြုလျှင် နောက်ခံ အမြင့် အကွက် ပုံစံ ကဲ့သို့ မျဉ်းပတ်တွင် ပြောင်းလဲကြလိမ့်မည်။

关键字

图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。

根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。

如果只出现一个关键字，则认为另一个关键字是 center。

所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

下面是等价的位置关键字：

百分数值

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。

如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。

因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。

background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。

长度值

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。

背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

ကျွန်တော် ကျင့်ကြည်းပါ

background-attachment အရေးယူပုံ သည် default အားဖြင့် scroll ဖြစ်ပါသည်။ ထိုအားဖြင့် အခြေအနေ သည် အခြေအနေ များ နှင့် တူ၍ လွှတ်တတ်ပါသည်

CSS 背景属性

工具箱

CSS 参考手册

CSS 实例

CSS 测验

CSS 教程

赞助商链接