CSS background-position-x 属性

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

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

下面有更多 "亲自试一试" 示例。

定义和用法

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

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

默认值：	0%
遗传：	不
可动画：	是的。阅读可动画的尝试一下
版本：	CSS3
JavaScript 语法：	对象.style.backgroundPositionX="center"尝试一下

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
background-position-x	1.0	12.0	49.0	1.0	15.0
background-position-x (with two value syntax)	Not supported	Not supported	49.0	15.4	Not supported

background-position-x: value;

Value	Description	Demo
left	Positions background left side on x-axis.	Demo ❯
right	Positions background right side on x-axis.	Demo ❯
center	Positions background center on x-axis.	Demo ❯
x%	Left side is 0% on x-axis, and right side is 100%. Percentage value refers to width of background positioning area minus width of background image.	Demo ❯
xpos	Horizontal distance from left side. Units can be pixels (0px) or any other CSS units.	Demo ❯
xpos offset	Two value syntax, only supported in Firefox and Safari. - xpos is set either to "left" or "right". - offset is horizontal distance from background image and "left" or "right" side set with xpos. Units can be pixels or any other CSS units.
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit