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	它從父元素繼承屬性。

CSS 背景位置屬性示例

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

使用單個關鍵字值的背景位置屬性

要設定影像的位置，我們可以使用關鍵字：left、right、top、bottom、center 與background-position 屬性一起使用。如果給出兩個值，第一個值設定水平方向，第二個值設定垂直方向。如果給出一個值，則另一個值取為中心。在以下示例中，使用了單個值。

示例

<!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 屬性一起使用。如果給出兩個值，第一個值設定水平方向，第二個值設定垂直方向。在以下示例中，使用了雙值。

示例

<!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%。在以下示例中，使用了單個值。

示例

<!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 屬性一起使用。如果給出兩個值，第一個值設定水平方向，第二個值設定垂直方向。在以下示例中，使用了雙值。

示例

<!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%。在以下示例中，使用了單個值。

示例

<!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 屬性一起使用。如果給出兩個值，第一個值設定水平方向，第二個值設定垂直方向。在以下示例中，使用了雙值。

示例

<!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 屬性一起使用。這在以下示例中顯示。

示例

<!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>

支援的瀏覽器

屬性
background-position	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

列印頁面