CSS 属性

background-position-x 属性设置元素背景图像的初始水平位置。图像的位置是相对于background-origin属性设置的值。

 如果在其后的元素上进行 background 或 background-position 声明，则 background-position-x 的值会被覆盖。

属性值

此属性的值可以指定为一个或多个值，以逗号分隔。

  • left:背景图像的左边缘与背景位置图层的左边缘对齐。

  • center:背景图像的中心背景图像与背景位置图层的中心对齐。

  • right:背景图像的右边缘与背景位置图层的右边缘对齐。

  • <length>:背景图像左垂直边缘相对于背景位置图层左垂直的偏移量

  • <percentage>:是背景图片相对于水平位置的偏移量到包含元素。

    • 0%:背景图像的左边缘与容器的左边缘对齐。

    • 100%:背景图像的右边缘与容器的右边缘对齐。

    • 50%:水平居中的背景图像。

适用范围

所有 HTML 元素。

DOM 语法

object.style.backgroundPositionX = "left 50px";

CSS background-position-x: left

以下是图像水平放置在左侧的示例:

<html>
<head>
<style>  
   .position-x-left {
      background-image: url('/css/images/tutimg.png');
      background-position-x: left;
      background-repeat: no-repeat;
      width: 500px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
      <div class="position-x-left"></div>
</body>
</html>

CSS background-position-x: right

下面是图像水平放置在右侧的示例:

<html>
<head>
<style>  
   .position-x-right {
      background-image: url('/css/images/tutimg.png');
      background-position-x: right;
      background-repeat: no-repeat;
      width: 500px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
      <div class="position-x-right"></div>
</body>
</html>

CSS background-position-x: center 

下面是图像水平居中放置的示例:

<html>
<head>
<style>  
   .position-x-center {
      background-image: url('/css/images/tutimg.png');
      background-position-x: center;
      background-repeat: no-repeat;
      width: 500px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
      <div class="position-x-center"></div>
</body>
</html>

CSS background-position-x: <length> 

以下是使用长度值水平放置图像的示例:

<html>
<head>
<style>  
   .position-x-length {
      background-image: url('/css/images/tutimg.png');
      background-position-x: 300px;
      background-repeat: no-repeat;
      width: 500px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
      <div class="position-x-length"></div>
</body>
</html>

CSS background-position-x: <percentage>

以下是使用百分比值水平放置图像的示例:

<html>
<head>
<style>  
   .position-x-percent {
      background-image: url('/css/images/tutimg.png');
      background-position-x: 80%;
      background-repeat: no-repeat;
      width: 500px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
      <div class="position-x-percent"></div>
</body>
</html>