Maviri ya Kina wa Kina wa Mwisho

Maelezo na matumizi

background-position-x Mafano ya kumwita picha ya nyuma kwenye mabara ya x.

Msaada:Kwa ujumbe, picha ya nyuma inapangwa kwenye kati ya kilele cha kina, na inarepewa kwenye uzoefu wa kikwakwati na kijisindikisi.

Mfano

Mfano 1

Jinsi ya kumwita picha ya nyuma kwenye mabara ya x:

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

亲自试一试

Mfano 2

Jinsi ya kumwita picha ya nyuma kwenye nchi ya kulia:

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

亲自试一试

Mfano 3

Jinsi ya kutumia namba za ufupi kumwita picha ya nyuma:

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

亲自试一试

Mfano 4

Jinsi ya kutumia maelezo ya piksi kumwita picha ya nyuma:

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

亲自试一试

Mfano 5

Kufanya picha ya nyuma ya kiwango chake inayokubadilisha kwa mazingira yake:

.hero-image {
  background-image: url("photographer.jpg"); /* mtiririka ya picha */
  background-color: #cccccc; /* 如果图像不可用，则使用此颜色 */
  height: 300px; /* 必须设置高度 */
  background-position-x: center; /* 将图像居中 */
  background-repeat: no-repeat; /* 不重复图像 */
  background-size: cover; /* 调整背景图像大小以覆盖整个容器 */
}

亲自试一试

CSS 语法

background-position-x: value;

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

相关页面

教程：Mabaki ya mawingu ya CSS

CSS 参考：background-image 属性

CSS 参考：background-position 属性

CSS 参考：background-position-y 属性

HTML DOM 参考：backgroundPosition 属性