CSS background-position-x 属性

定义和用法

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 属性