CSS background-position-x 属性

నిర్వచనం మరియు ఉపయోగం

background-position-x అట్రిబ్యూట్ సెట్ బ్యాక్‌గ్రౌండ్ చిత్రాన్ని x అక్షంపై సెట్ చేస్తుంది.

సలహా:డిఫాల్ట్ లో, బ్యాక్‌గ్రౌండ్ చిత్రం అంతర్గతంగా ఎల్లప్పుడూ ఉంటుంది మరియు ఉన్నతి మరియు అక్షాంశంలో పునరావృతం అవుతుంది.

ఇన్స్టాన్స్

ఉదాహరణ 1

ఎక్కువ అక్షంపై బ్యాక్‌గ్రౌండ్ చిత్రాన్ని ఎలా లోకేషన్ చేయాలి:

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;

属性值

值 描述
left 将背景定位在 x 轴的左侧。
right 将背景定位在 x 轴的右侧。
center 将背景定位在 x 轴的中心。
x%

x 轴的左侧为 0%，右侧为 100%。

百分比值指的是背景定位区域的宽度减去背景图像的宽度。
xpos 距离左侧的水平距离。单位可以是像素（如 0px）或其他 సిఎస్ఎస్ యూనిట్స్.
xpos offset

双值语法，仅在 Firefox 和 Safari 中支持。

  • xpos 设置为 left 或 right
  • offset 是背景图像与 xpos 设置的左侧或右侧的水平距离

单位可以是像素或其他 సిఎస్ఎస్ యూనిట్స్.
initial 将此属性设置为其默认值。参阅 initial.
inherit 从其父元素继承此属性。参阅 inherit.

సాంకేతిక వివరాలు

అప్రమేయ విలువ: 0%
పరిత్యాగం: లేదు
అనిమేషన్ తయారీ: మద్దతు పొందండి:అనిమేషన్ సంబంధిత అట్రిబ్యూట్లు.
వెర్షన్: CSS3
JavaScript సంకేతాలు: object.style.backgroundPositionX="center"

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ అట్రిబ్యూట్ను పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ను సూచిస్తాయి。

చ్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
ఒక ముఖం విధానం 1.0 12.0 49.0 1.0 15.0
ద్విముఖ సంకేతాల విధానం అనుమతించబడలేదు అనుమతించబడలేదు 49.0 15.4 అనుమతించబడలేదు

సంబంధిత పేజీలు

శిక్షణాలు:CSS బ్యాక్గ్రౌండ్

CSS సూచికbackground-image అట్రిబ్యూట్

CSS సూచికbackground-position అట్రిబ్యూట్

CSS సూచికbackground-position-y అట్రిబ్యూట్

HTML DOM సూచికbackgroundPosition అట్రిబ్యూట్