CSS background-position-x 屬性

定義和用法

background-position-x 屬性設置背景圖像在 x 軸上的位置。

提示：默認情況下，背景圖像放置在元素的左上角，并在垂直和水平方向上重復。

實例

例子 1

如何在 x 軸上定位背景圖像：

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: center;
}

親自試一試

例子 2

如何將背景圖像定位到右側：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: right;
}

親自試一試

例子 3

如何使用百分比定位背景圖像：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 50%;
}

親自試一試

例子 4

如何使用像素定位背景圖像：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 150px;
}

親自試一試

例子 5

使用不同的背景屬性創建一個覆蓋其容器的背景圖像：

.hero-image {
  background-image: url("photographer.jpg"); /* 使用的圖像 */
  background-color: #cccccc; /* 如果圖像不可用，則使用此顏色 */
  height: 300px; /* 必須設置高度 */
  background-position-x: center; /* 將圖像居中 */
  background-repeat: no-repeat; /* 不重復圖像 */
  background-size: cover; /* 調整背景圖像大小以覆蓋整個容器 */
}

親自試一試

CSS 語法

background-position-x: value;

屬性值

技術細節

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

相關頁面

教程：CSS 背景

CSS 參考：background-image 屬性

CSS 參考：background-position 屬性

CSS 參考：background-position-y 屬性

HTML DOM 參考：backgroundPosition 屬性