background-position-y
Baseline 廣泛可用 *
background-position-y CSS 屬性設定每個背景影像的初始垂直位置。該位置相對於 background-origin 設定的定位層。
試一試
background-position-y: top;
background-position-y: center;
background-position-y: 25%;
background-position-y: 2rem;
background-position-y: bottom 32px;
<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%;
}
此屬性的值將被在其之後應用於元素的 background 或 background-position 簡寫屬性的任何宣告覆蓋。
語法
css
/* Keyword values */
background-position-y: top;
background-position-y: center;
background-position-y: bottom;
/* <percentage> values */
background-position-y: 25%;
/* <length> values */
background-position-y: 0px;
background-position-y: 1cm;
background-position-y: 8em;
/* Side-relative values */
background-position-y: bottom 3px;
background-position-y: bottom 10%;
/* Multiple values */
background-position-y: 0px, center;
/* Global values */
background-position-y: inherit;
background-position-y: initial;
background-position-y: revert;
background-position-y: revert-layer;
background-position-y: unset;
background-position-y 屬性指定為一個或多個值，用逗號分隔。
值
top-
將背景影像的頂部邊緣與背景定位層的頂部邊緣對齊。
center-
將背景影像的垂直中心與背景定位層的垂直中心對齊。
bottom-
將背景影像的底部邊緣與背景定位層的底部邊緣對齊。
<length>-
給定背景影像的水平邊緣與相應的背景定位層頂部水平邊緣的偏移。（某些瀏覽器允許將底部邊緣用於偏移）。
<percentage>-
給定背景影像相對於容器的垂直位置偏移。值為 0% 意味著背景影像的頂部邊緣與容器的頂部邊緣對齊，值為 100% 意味著背景影像的底部邊緣與容器的底部邊緣對齊，因此值為 50% 可使背景影像垂直居中。
正式定義
| 初始值 | 0% |
|---|---|
| 應用於 | 所有元素。也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 否 |
| 百分比 | 參考背景定位區域的高度減去背景影像的高度 |
| 計算值 | 一個列表，每個專案由以下部分組成：作為絕對長度和百分比組合給出的偏移量，加上一個原點關鍵字 |
| 動畫型別 | 一個可重複的列表 |
正式語法
background-position-y =
[ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#
<length-percentage> =
<length> |
<percentage>
示例
基本示例
以下示例展示了背景影像的實現，其中 background-position-x 和 background-position-y 分別用於定義影像的水平和垂直位置。
HTML
html
<div></div>
CSS
css
div {
width: 300px;
height: 300px;
background-color: skyblue;
background-image: url("https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: bottom;
}
結果
側邊相關值
以下示例展示了對側邊相關偏移語法的支援，該語法允許開發者從任何邊緣偏移背景。
HTML
html
<div></div>
CSS
css
div {
width: 300px;
height: 300px;
background-color: seagreen;
background-image: url("https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png");
background-repeat: no-repeat;
background-position-x: right 20px;
background-position-y: bottom 10px;
}
結果
規範
| 規範 |
|---|
| CSS 背景模組第 4 級 # background-position-longhands |
瀏覽器相容性
載入中…