1. Web
  2. CSS
  3. background-position

background-position

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

background-position 這個 CSS 屬性用於為每一個背景圖片設定初始位置。這個位置是相對於由 background-origin 定義的位置圖層而言的。

試一試

background-position: top;

background-position: left;

background-position: center;

background-position: 25% 75%;

background-position: bottom 50px right 100px;

background-position: right 35% bottom 45%;

<section class="display-block" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  background-color: navajowhite;
  background-image: url("/shared-assets/images/examples/star.png");
  background-repeat: no-repeat;
  height: 100%;
}

語法

css
/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position:
  0 0,
  center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: revert;
background-position: revert-layer;
background-position: unset;

background-position 屬性可以指定一個或多個 <position> 值，以逗號分隔。

值

<position>

一個 <position>。位置定義了一個 x/y 座標，以相對於元素盒子的邊緣來放置一個專案。它可以使用一到四個值來定義。如果使用兩個非關鍵字值，第一個值表示水平位置，第二個值表示垂直位置。如果只指定一個值，則第二個值假定為 center。如果使用三個或四個值，那麼長度百分比值是前面關鍵字值的偏移量。

單值語法：該值可以是

  • 關鍵字 center，使圖片居中。
  • 關鍵字 top、left、bottom、right 中的一個。這會指定一個邊緣來放置專案。另一個維度的值則被設為 50%，因此專案會被放置在指定邊緣的中間。
  • 一個 <length> 或 <percentage>。這會指定相對於左邊緣的 X 座標，Y 座標則被設為 50%。

雙值語法：一個值定義 X，另一個值定義 Y。每個值可以是

  • 關鍵字 top、left、bottom、right 中的一個。如果給出的是 left 或 right，那麼它定義 X，另一個給出的值定義 Y。如果給出的是 top 或 bottom，那麼它定義 Y，另一個值定義 X。
  • 一個 <length> 或 <percentage>。如果另一個值是 left 或 right，那麼此值定義相對於頂邊的 Y。如果另一個值是 top 或 bottom，那麼此值定義相對於左邊的 X。如果兩個值都是 <length> 或 <percentage>，那麼第一個值定義 X，第二個值定義 Y。
  • 請注意：如果一個值是 top 或 bottom，那麼另一個值不能是 top 或 bottom。如果一個值是 left 或 right，那麼另一個值不能是 left 或 right。這意味著，例如，top top 和 left right 是無效的。
  • 順序：當配對關鍵字時，位置不重要，因為瀏覽器可以重新排序；top left 和 left top 將產生相同的結果。當將 <length> 或 <percentage> 與關鍵字配對時，位置很重要：定義 X 的值應該在 Y 之前，例如 right 20px 是有效的，而 20px right 是無效的。值 left 20% 和 20% bottom 是有效的，因為 X 和 Y 值被明確定義且位置正確。
  • 預設值為 left top 或 0% 0%。

三值語法：兩個值是關鍵字值，第三個是前一個值的偏移量

  • 第一個值是關鍵字 top、left、bottom、right 或 center 中的一個。如果此處給出的是 left 或 right，那麼它定義 X。如果給出的是 top 或 bottom，那麼它定義 Y，而另一個關鍵字值定義 X。
  • <length> 或 <percentage> 值，如果是第二個值，則是第一個值的偏移量。如果是第三個值，則是第二個值的偏移量。
  • 單個長度或百分比值是它前面關鍵字的偏移量。一個關鍵字與兩個 <length> 或 <percentage> 值的組合是無效的。

四值語法：第一個和第三個值是定義 X 和 Y 的關鍵字值。第二個和第四個值是前面 X 和 Y 關鍵字值的偏移量

  • 第一個和第三個值等於關鍵字 top、left、bottom 或 right 中的一個。如果第一個值給出的是 left 或 right，那麼它定義 X，另一個值定義 Y。如果第一個值給出的是 top 或 bottom，那麼它定義 Y，另一個關鍵字值定義 X。
  • 第二個和第四個值是 <length> 或 <percentage> 值。第二個值是第一個關鍵字的偏移量。第四個值是第二個關鍵字的偏移量。

關於百分比

給定背景圖片位置的百分比偏移是相對於容器的。0% 的值意味著背景圖片的左（或上）邊緣與容器相應的左（或上）邊緣對齊，或者說，圖片的 0% 標記將位於容器的 0% 標記上。100% 的值意味著背景圖片的右（或下）邊緣與容器的右（或下）邊緣對齊，或者說，圖片的 100% 標記將位於容器的 100% 標記上。因此，水平或垂直方向上 50% 的值會使背景圖片居中，因為圖片的 50% 標記會位於容器的 50% 標記處。同樣，background-position: 25% 75% 意味著圖片上距離左邊 25%、距離頂部 75% 的點，將被放置在容器中距離容器左邊 25%、距離容器頂部 75% 的位置上。

本質上，發生的情況是背景圖片的尺寸會從相應的容器尺寸中減去，然後將結果值的百分比用作距離左（或上）邊緣的直接偏移量。

(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)

以 X 軸為例，假設我們有一張 300px 寬的圖片，並在一個 100px 寬的容器中使用它，background-size 設定為 auto

100px - 300px = -200px (container & image difference)

因此，當位置百分比為 -25%、0%、50%、100%、125% 時，我們得到以下圖片到容器邊緣的偏移值

-200px * -25% = 50px
-200px * 0% = 0px
-200px * 50% = -100px
-200px * 100% = -200px
-200px * 125% = -250px

因此，對於我們示例中的這些結果值，圖片的左邊緣相對於容器的左邊緣的偏移量為

  • +50px（將圖片左邊緣置於 100 畫素寬容器的中心）
  • 0px（圖片左邊緣與容器左邊緣重合）
  • -100px（圖片左邊緣在容器左側 100px 處，在此示例中，這意味著圖片的中間 100px 區域在容器中居中）
  • -200px（圖片左邊緣在容器左側 200px 處，在此示例中，這意味著圖片右邊緣與容器右邊緣重合）
  • -250px（圖片左邊緣在容器左側 250px 處，在此示例中，這將 300px 寬的圖片的右邊緣置於容器的中心）

值得一提的是，如果你的 background-size 在某個軸上等於容器的大小，那麼該軸的百分比位置將沒有效果，因為“容器-圖片尺寸差”將為零。你需要使用絕對值進行偏移。

正式定義

初始值0% 0%
應用於所有元素。也適用於 ::first-letter 和 ::first-line。
繼承性否
百分比指的是背景定位區域的大小減去背景圖片的大小；對於水平偏移，“大小”指寬度，對於垂直偏移，則指高度
計算值作為簡寫中的每個屬性
  • background-position-x：一個列表，每個專案由一個絕對長度和百分比的組合給出的偏移量，外加一個原點關鍵字組成
  • background-position-y：一個列表，每個專案由一個絕對長度和百分比的組合給出的偏移量，外加一個原點關鍵字組成
動畫型別一個可重複的列表

正式語法

background-position = 
  <bg-position>#  

<bg-position> = 
  <position>        |
  <position-three>  

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<position-three> = 
  [ left | center | right ] && [ [ top | bottom ] <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ top | center | bottom ]  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<length-percentage> = 
  <length>      |
  <percentage>

示例

定位背景圖片

這三個示例都使用 background 屬性建立了一個包含星形圖片的黃色矩形元素。在每個示例中，星形處於不同的位置。第三個示例說明了如何在一個元素內為兩個不同的背景圖片指定位置。

HTML

html
<div class="example-one">Example One</div>
<div class="example-two">Example Two</div>
<div class="example-three">Example Three</div>

CSS

css
/* Shared among all <div>s */
div {
  background-color: #ffee99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

/* These examples use the `background` shorthand property */
.example-one {
  background: url("star-transparent.gif") #ffee99 2.5cm bottom no-repeat;
}
.example-two {
  background: url("star-transparent.gif") #ffee99 left 4em bottom 1em no-repeat;
}

/* Multiple background images: Each image is matched with the
   corresponding position, from first specified to last. */
.example-three {
  background-image: url("star-transparent.gif"), url("cat-front.png");
  background-position:
    0px 0px,
    right 3em bottom 2em;
}

結果

規範

規範
CSS Backgrounds and Borders Module Level 3
# background-position

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者們貢獻。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.