CSS - background-position 属性

上一页
下一页

CSS background-position 属性设置元素背景图像的初始位置。图像的位置相对于由background-origin 属性设置的值。

语法

background-position: value;

属性值

值 描述
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
 它指定图像的位置。如果指定单个关键字，则另一个值变为中心。
x% y% 它以百分比指定图像的位置。第一个值用于水平方向，第二个值用于垂直方向。如果只指定一个值，则另一个值为 50%。默认值为 0% 0%。
xpos ypos 它以长度单位指定图像的位置。第一个值用于水平方向，第二个值用于垂直方向。如果只指定一个值，则另一个值为 50%。
initial 它将属性设置为其初始值。
inherit 它从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 背景位置属性示例

以下示例使用不同的值解释了background-position 属性。

使用单个关键字值的背景位置属性

要设置图像的位置，我们可以使用关键字：left、right、top、bottom、center 与background-position 属性一起使用。如果给出两个值，第一个值设置水平方向，第二个值设置垂直方向。如果给出一个值，则另一个值取为中心。在以下示例中，使用了单个值。

示例

Open Compiler
<!DOCTYPE html>
<html>

<head>
   <style>
      .background {
         background-image: url('/css/images/tutimg.png');
         background-size: 100px 100px;
         border: 4px solid gray;
         width: 300px;
         height: 300px;
         background-repeat: no-repeat;
         position: relative;
      }

      .position-left {
         background-position: left;
      }

      .position-right {
         background-position: right;
      }

      .position-top {
         background-position: top;
      }

      .position-bottom {
         background-position: bottom;
      }

      .position-center {
         background-position: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-position Property
   </h2>
   <h4>
      Background Position with Single Values
   </h4>
   <p>
      <strong>
         background-position:
      </strong> 
      left (the second value is default "center")
   </p>
   <div class=" background position-left">
   </div>
   <p>
      <strong>
         background-position:
      </strong>
      right (the second value is default "center")
   </p>
   <div class="background position-right">
   </div>
   <p>
      <strong>
         background-position:
      </strong>
      top (the second value is default "center")
   </p>
   <div class="background position-top">
   </div>
   <p>
      <strong>
         background-position:
      </strong> 
      bottom (the second value is default "center")
   </p>
   <div class="background position-bottom">
   </div>
   <p>
      <strong>
         background-position:
      </strong> 
      center (the second value is default "center")
   </p>
   <div class="background position-center">
   </div>
</body>

</html>

使用双关键字值的背景位置属性

要设置图像的位置，我们可以使用关键字：left、right、top、bottom、center 与background-position 属性一起使用。如果给出两个值，第一个值设置水平方向，第二个值设置垂直方向。在以下示例中，使用了双值。

示例

Open Compiler
<!DOCTYPE html>
<html>

<head>
   <style>
      .background {
         background-image: url('/css/images/tutimg.png');
         background-size: 100px 100px;
         border: 4px solid gray;
         width: 300px;
         height: 300px;
         background-repeat: no-repeat;
         position: relative;
      }

      .position-left {
         background-position: left top;
      }

      .position-right {
         background-position: right bottom;
      }

      .position-top {
         background-position: top right;
      }

      .position-bottom {
         background-position: bottom left;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-position Property
   </h2>
   <h4>
      Background Position with Double Values
   </h4>
   <p>
      <strong>
         background-position:
      </strong>
      left top
   </p>
   <div class=" background position-left">
   </div>
   <p>
      <strong>
         background-position:
      </strong>
      right bottom
   </p>
   <div class="background position-right">
   </div>
   <p>
      <strong>
         background-position:
      </strong>
      top right
   </p>
   <div class="background position-top">
   </div>
   <p>
      <strong>
         background-position:
      </strong> 
      bottom left
   </p>
   <div class="background position-bottom">
   </div>
</body>

</html>

使用单个百分比值的背景位置属性

要设置图像的位置，我们可以使用百分比值与background-position 属性一起使用。如果给出两个值，第一个值设置水平方向，第二个值设置垂直方向。如果给出一个值，则另一个值取为 50%。在以下示例中，使用了单个值。

示例

Open Compiler
<!DOCTYPE html>
<html>

<head>
   <style>
      .background {
         background-image: url('/css/images/tutimg.png');
         background-size: 100px 100px;
         border: 4px solid gray;
         width: 300px;
         height: 300px;
         background-repeat: no-repeat;
         position: relative;
      }

      .position-left {
         background-position: 20%;
      }

      .position-right {
         background-position: 30%;
      }

      .position-top {
         background-position: 50%;
      }

      .position-bottom {
         background-position: 90%;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-position Property
   </h2>
   <h4>
      Background Position with Single Values
   </h4>
   <p>
      <strong>
         Note:
      </strong>
      0%0% - left top, 100% 100% - right bottom
    </p>
   <p>
      <strong>
         background-position:
      </strong>
      20% (the second value is "50%")
   </p>
   <div class=" background position-left">
   </div>
   <p>
      <strong>
         background-position:
      </strong> 
      30% (the second value is "50%")
   </p>
   <div class="background position-right">
   </div>
   <p>
      <strong>
         background-position:
      </strong> 
      50% (the second value is "50%")
   </p>
   <div class="background position-top">
   </div>
   <p>
      <strong>
         background-position:
      </strong> 
      90% (the second value is "50%")
   </p>
   <div class="background position-bottom">
   </div>
</body>

</html>

使用双百分比值的背景位置属性

要设置图像的位置，我们可以使用百分比值与background-position 属性一起使用。如果给出两个值，第一个值设置水平方向，第二个值设置垂直方向。在以下示例中，使用了双值。

示例

Open Compiler
<!DOCTYPE html>
<html>

<head>
   <style>
      .background {
         background-image: url('/css/images/tutimg.png');
         background-size: 100px 100px;
         border: 4px solid gray;
         width: 300px;
         height: 300px;
         background-repeat: no-repeat;
         position: relative;
      }

      .position-left {
         background-position: 20% 40%;
      }

      .position-right {
         background-position: 30% 70%;
      }

      .position-top {
         background-position: 50% 20%;
      }

      .position-bottom {
         background-position: 90% 45%;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-position Property
   </h2>
   <h4>
      Background Position with Double Values
   </h4>
   <p>
      <strong>
         Note:
      </strong> 
      0%0% - left top, 100% 100% - right bottom
   </p>
   <p>
      <strong>
         background-position:
      </strong> 
      20% 40%
   </p>
   <div class=" background position-left">
   </div>
   <p>
      <strong>
         background-position:
      </strong> 
      30% 70%
   </p>
   <div class="background position-right">
   </div>
   <p>
      <strong>
         background-position:
      </strong> 
      50% 20%
   </p>
   <div class="background position-top">
   </div>
   <p>
      <strong>
         background-position:
      </strong> 
      90% 45%
   </p>
   <div class="background position-bottom">
   </div>
</body>

</html>

使用单个长度值的背景位置属性

要设置图像的位置，我们可以使用长度值与background-position 属性一起使用。如果给出两个值，第一个值设置水平方向，第二个值设置垂直方向。如果给出一个值，则另一个值取为 50%。在以下示例中，使用了单个值。

示例

Open Compiler
<!DOCTYPE html>
<html>

<head>
   <style>
      .background {
         background-image: url('/css/images/tutimg.png');
         background-size: 100px 100px;
         border: 4px solid gray;
         width: 300px;
         height: 300px;
         background-repeat: no-repeat;
         position: relative;
      }

      .position-left {
         background-position: 20px
      }

      .position-right {
         background-position: 30px;
      }

      .position-top {
         background-position: 50px;
      }

      .position-bottom {
         background-position: 90px;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-position Property
   </h2>
   <h4>
      Background Position with Single Values
   </h4>
   <p>
      <strong>
         background-position:
      </strong> 
      20px (the second value is center)
   </p>
   <div class=" background position-left">
   </div>
   <p>
      <strong>
         background-position:
      </strong> 
      30px (the second value is center)
   </p>
   <div class="background position-right">
   </div>
   <p>
      <strong>
         background-position:
      </strong> 
      50px (the second value is center)
   </p>
   <div class="background position-top">
   </div>
   <p>
      <strong>
         background-position:
      </strong> 
      90px (the second value is center)
   </p>
   <div class="background position-bottom">
   </div>
</body>

</html>

使用双长度值的背景位置属性

要设置图像的位置，我们可以使用长度值与background-position 属性一起使用。如果给出两个值，第一个值设置水平方向，第二个值设置垂直方向。在以下示例中，使用了双值。

示例

Open Compiler
<!DOCTYPE html>
<html>

<head>
   <style>
      .background {
         background-image: url('/css/images/tutimg.png');
         background-size: 100px 100px;
         border: 4px solid gray;
         width: 300px;
         height: 300px;
         background-repeat: no-repeat;
         position: relative;
      }

      .position-left {
         background-position: 20px 40px;
      }

      .position-right {
         background-position: 30px 70px;
      }

      .position-top {
         background-position: 50px 150px;
      }

      .position-bottom {
         background-position: 120px 140px;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-position Property
   </h2>
   <h4>
      Background Position with Double Values
   </h4>
   <p>
      <strong>
         background-position:
      </strong> 
      20px 40px
   </p>
   <div class=" background position-left">
   </div>
   <p>
      <strong>
         background-position:
      </strong> 
      30px 70px
   </p>
   <div class="background position-right">
   </div>
   <p>
      <strong>
         background-position:
      </strong>
      50px 150px
   </p>
   <div class="background position-top">
   </div>
   <p>
      <strong>
         background-position:
      </strong> 
      120px 140px
   </p>
   <div class="background position-bottom">
   </div>
</body>

</html>

使用不同值的背景位置属性

要设置图像的位置，我们可以组合使用不同的值（例如 % pos）与background-position 属性一起使用。这在以下示例中显示。

示例

Open Compiler
<!DOCTYPE html>
<html>

<head>
   <style>
      .background {
         background-image: url('/css/images/tutimg.png');
         background-size: 100px 100px;
         border: 4px solid gray;
         width: 300px;
         height: 300px;
         background-repeat: no-repeat;
         position: relative;
      }

      .position-left {
         background-position: 20% 60px;
      }

      .position-right {
         background-position: 60% 120px;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-position Property
   </h2>
   <h4>
      Background Position with Different Values
   </h4>
   <p>
      <strong>
         background-position:
      </strong> 
      20% 60px
   </p>
   <div class=" background position-left">
   </div>
   <p>
      <strong>
         background-position:
      </strong> 
      60% 120px
   </p>
   <div class="background position-right">
   </div>
</body>

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
background-position 1.0 4.0 1.0 1.0 3.5
css_properties_reference.htm
打印页面
上一页
下一页
广告