background-position-x 属性设置每个背景的水平位置。
可以指定一个或者多个值，以逗号分隔。
默认情况下，背景图像位于元素的左上角并在水平和垂直方向重复。
负值是有效的值。
| 初始值 | left |
|---|---|
| 应用于 | 所有元素。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3 |
| DOM 语法 | object.style.backgroundPositionX="right"; |
CSS background-position-x 属性值说明
| 值 | 说明 |
|---|---|
| left | 指定背景图像左边缘与背景位置层左边缘的对齐方式。 |
| center | 指定背景图像中心与背景位置层中心的对齐方式。 |
| right | 指定背景图像右边缘与背景位置层右边缘的对齐方式。 |
| length | 指定给定背景图像的左垂直边与背景位置层的左垂直边的偏移。 |
| percentage | 指定背景图像相对于容器的水平位置的偏移。0%将背景图像的左边缘与容器的左边缘对齐，100%将背景图像的右边缘与容器的右边缘对齐，50%将背景图像水平居中。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
语法
background-position-x: left | center | right | length | percentage | initial | inherit;
background-position-x 属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("/build/images/onitroad-logo-black.png") repeat-y;
background-position-x: 70%;
}
</style>
</head>
<body>
<h2>Background-position-x 属性示例</h2>
</body>
</html>
结果
具有“中心”值的 background-position-x 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("/build/images/onitroad-logo-black.png") repeat-x;
background-position-x: center;
}
</style>
</head>
<body>
<h2>Background-position-x 属性示例</h2>
</body>
</html>
具有“左”值的 background-position-x 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("/build/images/onitroad-logo-black.png") repeat-y;
background-position-x: left;
}
</style>
</head>
<body>
<h2>Background-position-x 属性示例</h2>
</body>
</html>
具有“长度”值的 background-position-x 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("/build/images/onitroad-logo-black.png") repeat-y;
background-attachment: fixed;
background-position-x: 30px;
}
</style>
</head>
<body>
</body>
</html>
日期：2020-06-02 22:14:16 来源：oir作者：oir