CSS အေနင်း-အချိန်

定义和用法

background-position-x 属性设置背景图像在 x 轴上的位置。

提示：默认情况下，背景图像放置在元素的左上角，并在垂直和水平方向上重复。

实例

例子 1

如何在 x 轴上定位背景图像：

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: center;
}

ကိုယ်တိုင် ကျင်းပပြီ

例子 2

如何将背景图像定位到右侧：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: right;
}

ကိုယ်တိုင် ကျင်းပပြီ

例子 3

如何使用百分比定位背景图像：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 50%;
}

ကိုယ်တိုင် ကျင်းပပြီ

例子 4

如何使用像素定位背景图像：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 150px;
}

ကိုယ်တိုင် ကျင်းပပြီ

例子 5

使用不同的背景属性创建一个覆盖其容器的背景图像：

.hero-image {
  background-image: url("photographer.jpg"); /* 使用的图像 */
  background-color: #cccccc; /* 如果图像不可用，则使用此颜色 */
  height: 300px; /* အရှိန် ကို သတ်မှတ်ပါ */
  background-position-x: center; /* ပုံစံ ကို အရှိန် အား စစ်ဆေးထားသော ရှိခြင်း အား စစ်ဆေးထားသော ရှိခြင်း */
  background-repeat: no-repeat; /* ပုံစံ ကို ချချန် */
  background-size: cover; /* အပိုင်းအစား အရိပ် အား အပိုင်းအစား ကို ကူးယူရန် ပြုလုပ် */
}

ကိုယ်တိုင် ကျင်းပပြီ

CSS အရိပ်

background-position-x: value;

အရိပ်

နည်းပါးစွာ

ဘာသာပြန်မှု ကွင်း

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

ပတ်သက်တဲ့ စာမျက်နှာ

ညွှန်ပြမှုCSS နိုင်ငံရေး

CSS ကိုးကွယ်မှုbackground-image အရိပ်

CSS ကိုးကွယ်မှုbackground-position အရိပ်

CSS ကိုးကွယ်မှုbackground-position-y အရိပ်

HTML DOM ကိုးကွယ်မှုbackgroundPosition အရိပ်