主题
  • 默认模式
  • 浅蓝色模式
  • 淡绿色模式
  • 深夜模式

定义和用法

background-position-x是 CSS 中用于设置背景图像水平位置的属性。

background-position-x通常与background-position-y配合使用,分别控制背景图像的水平和垂直位置。

默认值: 0%
继承性:
可动画性: 支持。请参阅:可动画属性
版本: CSS3
JavaScript 语法: object.style.backgroundPositionX="center"

常用的实例

接下来通过多个实例演示background-position-x属性的用法,来深化您对background-position-x属性的理解。

1. 使用关键字设置背景图像在 x 轴的位置

实例代码 运行代码
复制
.example {
    background-image:url('/uploads/20250507/deer.png');
    background-repeat: no-repeat;
    background-position-x: center;
}

2. 使用百分比设置背景图像在 x 轴的位置

实例代码 运行代码
复制
.example {
    background-image:url('/uploads/20250507/deer.png');
    background-repeat: no-repeat;
    background-position-x: 20%;
}

3. 使用像素设置背景图像在 x 轴的位置

实例代码 运行代码
复制
.example {
    background-image:url('/uploads/20250507/deer.png');
    background-repeat: no-repeat;
    background-position-x: 50px;
}

CSS 语法

background-position-x: value;

属性值

描述
left 将背景定位在 x 轴的左侧。
center 将背景定位在 x 轴的中间。
right 将背景定位在 x 轴的右侧。
x% x 轴的左侧为 0%,右侧为 100%。
百分比值指的是背景定位区域的宽度减去背景图像的宽度。
xpos 距离左侧的水平距离。单位可以是像素(如 0px)或其他 CSS 单位
xpos offset 双值语法,仅在 Firefox 和 Safari 中支持。
  • xpos 设置为 left 或 right
  • offset 是背景图像与 xpos 设置的左侧或右侧的水平距离
单位可以是像素或其他 CSS 单位
initial 将此属性设置为其默认值。参阅 initial
inherit 从其父元素继承此属性。参阅 inherit

浏览器支持

表中的数字指定了完全支持background-position-x属性的第一个浏览器版本。

Chrome 浏览器 EDGE 浏览器 Firefox 浏览器 Safari 浏览器 Opera 浏览器
单值语法 1.0 12.0 49.0 1.0 15.0
双值语法 不支持 不支持 49.0 15.4 不支持

相关页面

CSS 教程:CSS 背景

CSS 参考手册:background-image 属性

CSS 参考手册:background-position 属性

CSS 参考手册:background-position-y 属性



评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
87 章节
54 阅读
0 评论
教程目录

CSS 参考手册

CSS 属性(字母排序) CSS 属性(功能排序) CSS 浏览器支持 CSS 选择器 CSS 函数 CSS 可动画性 CSS Web安全字体 CSS 单位 CSS 颜色 CSS 颜色值

CSS 属性

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function aspect-ratio backdrop-filter backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size block-size border border-block border-block-color border-block-end border-block-end-color border-block-end-style border-block-end-width border-block-start border-block-start-color border-block-start-style border-block-start-width border-block-style border-block-width border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-end-end-radius border-end-start-radius border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-inline border-inline-color border-inline-end border-inline-end-color border-inline-end-style border-inline-end-width border-inline-start border-inline-start-color border-inline-start-style border-inline-start-width border-inline-style border-inline-width border-left border-left-color border-left-style border-right-style border-top-left-radius border-top-right-radius border-top-style