CSS background-position-y 屬性
示例
如何定位背景圖片在 y 軸上的位置
div {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-position-y: center;
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
background-position-y
屬性設定背景圖片在 y 軸上的位置。
提示: 預設情況下,背景圖片放置在元素的左上角,並垂直和水平重複。
檢視演示 ❯預設值 | 0% |
---|---|
繼承 | no |
可動畫 | 是。 閱讀關於animatable 嘗試一下 |
版本 | CSS3 |
JavaScript 語法 | object.style.backgroundPositionY="center" 嘗試一下 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
屬性 | |||||
---|---|---|---|---|---|
background-position-y | 1.0 | 12.0 | 49.0 | 1.0 | 15.0 |
background-position-y (使用雙值語法) |
不支援 | 不支援 | 49.0 | 15.4 | 不支援 |
CSS 語法
background-position-y: 值;
屬性值
值 | 描述 | 演示 |
---|---|---|
top | 將背景圖片定位在 y 軸的頂部。 | 演示 ❯ |
bottom | 將背景圖片定位在 y 軸的底部。 | 演示 ❯ |
center | 將背景圖片定位在 y 軸的中心。 | 演示 ❯ |
y% | 在 y 軸上,頂部為 0%,底部為 100%。百分比值是指背景定位區域的高度減去背景圖片的高度。 | 演示 ❯ |
ypos | 與頂部邊緣的垂直距離。單位可以是畫素 (0px) 或任何其他 CSS 單位。 | 演示 ❯ |
ypos 偏移 | 雙值語法,僅在 Firefox 和 Safari 中支援。 - ypos 被設定為 "top" 或 "bottom"。 - offset 是背景圖片和由 ypos 設定的 "top" 或 "bottom" 邊緣之間的垂直距離。單位可以是畫素或任何其他 CSS 單位。 |
|
initial | 將此屬性設定為其預設值。閱讀關於initial | |
inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
如何將背景圖片定位在頂部
body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position-y: bottom;
}
自己動手試一試 »
示例
如何使用百分比在 y 軸上定位背景圖片
body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position-y: 50%;
}
自己動手試一試 »
示例
如何使用畫素在 y 軸上定位背景圖片
body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position-y: 80px;
}
自己動手試一試 »
相關頁面
CSS 教程:CSS 背景
CSS 參考: background-image 屬性
CSS 參考: background-position 屬性
CSS 參考: background-position-x 屬性
HTML DOM 參考: backgroundPosition 屬性