CSS နောက်ခံ ချည့်ကြောင်း

CSS background-repeat

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

某些图像应只适合水平或垂直方向上重复，否则它们看起来会很奇怪，如下所示：

အကျိုးသုံး

body {
  background-image: url("gradient_bg.png");
}

ကိုယ်တိုင် ကြိုးစားကြည့်

如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;)，则背景看起来会更好：

အကျိုးသုံး

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

ကိုယ်တိုင် ကြိုးစားကြည့်

提示：如需垂直重复图像，请设置 background-repeat: repeat-y;。

CSS background-repeat: no-repeat

background-repeat 属性还可指定只显示一次背景图像：

အကျိုးသုံး

背景图像仅显示一次：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

ကိုယ်တိုင် ကြိုးစားကြည့်

在上例中，背景图像与文本放置在同一位置。我们想要更改图像的位置，以免图像过多干扰文本。

CSS background-position

background-position 属性用于指定背景图像的位置。

အကျိုးသုံး

ပြိုကွက် ပုံရိပ် အရှေ့မှ အရှေ့အထိပ် တွင် ထည့်သွင်းပါ:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

ကိုယ်တိုင် ကြိုးစားကြည့်