CSS background-position-x 屬性
示例
如何將背景圖片放置在 x 軸上
div {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-position-x: center;
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
background-position-x 屬性設定背景圖片在 x 軸上的位置。
提示： 預設情況下，背景圖片放置在元素的左上角，並垂直和水平重複。
| 預設值 | 0% |
|---|---|
| 繼承 | no |
| 可動畫 | 是。 閱讀關於可動畫屬性 嘗試一下 |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.backgroundPositionX="center" 嘗試一下 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| background-position-x | 1.0 | 12.0 | 49.0 | 1.0 | 15.0 |
| background-position-x (使用雙值語法) |
不支援 | 不支援 | 49.0 | 15.4 | 不支援 |
CSS 語法
background-position-x: 值;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| left | 在 x 軸上將背景放置在左側。 | 演示 ❯ |
| right | 在 x 軸上將背景放置在右側。 | 演示 ❯ |
| center | 在 x 軸上將背景放置在中心。 | 演示 ❯ |
| x% | 在 x 軸上，左側為 0%，右側為 100%。百分比值是指背景定位區域的寬度減去背景影像的寬度。 | 演示 ❯ |
| xpos | 與左側的水平距離。單位可以是畫素 (0px) 或任何其他 CSS 單位。 | 演示 ❯ |
| xpos offset | 雙值語法，僅在 Firefox 和 Safari 中支援。 - xpos 設定為 "left" 或 "right"。 - offset 是背景影像與 xpos 設定的 "left" 或 "right" 側之間的水平距離。單位可以是畫素或任何其他 CSS 單位。 |
|
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
如何將背景圖片放置在右側
body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-position-x: right;
}
自己動手試一試 »
示例
如何使用百分比放置背景圖片
body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-position-x: 50%;
}
自己動手試一試 »
示例
如何使用畫素放置背景圖片
body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-position-x: 150px;
}
自己動手試一試 »
示例
使用不同的背景屬性來建立覆蓋其容器的背景影像
.hero-image {
background-image: url("photographer.jpg"); /* 使用的圖片 */
background-color: #cccccc; /* 如果圖片不可用時使用 */
height: 300px; /* 您必須設定一個指定的高度 */
background-position-x: center; /* 使影像居中 */
background-repeat: no-repeat; /* 不重複圖片 */
background-size: cover; /* 將背景圖片縮放到覆蓋整個容器 */
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 背景
CSS 參考： background-image 屬性
CSS 參考： background-position 屬性
CSS 參考： background-position-y 屬性
HTML DOM 參考： backgroundPosition 屬性
