Atribut background-position-x CSS

halaman sebelumnya background-position
Next Page background-position-y

定义和用法

background-position-x 属性设置背景图像在 x 轴上的位置。

提示：默认情况下，背景图像放置在元素的左上角，并在垂直和水平方向上重复。

实例

例子 1

如何在 x 轴上定位背景图像：

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

Coba sendiri

例子 2

如何将背景图像定位到右侧：

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

Coba sendiri

例子 3

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

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

Coba sendiri

例子 4

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

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

Coba sendiri

例子 5

使用不同的背景属性创建一个覆盖其容器的背景图像：

.hero-image {
  background-image: url("photographer.jpg"); /* 使用的图像 */
  background-color: #cccccc; /* Jika gambar tidak tersedia, gunakan warna ini */
  height: 300px; /* Wajib mengatur tinggi */
  background-position-x: center; /* Menempatkan gambar di tengah */
  background-repeat: no-repeat; /* Tidak mengulangi gambar */
  background-size: cover; /* Atur ukuran gambar latar belakang untuk menutup seluruh kontainer */
}

Coba sendiri

Gramata CSS

background-position-x: value;

Nilai atribut

Nilai	Deskripsi
left	menempatkan latar belakang di kiri sumbu x
right	menempatkan latar belakang di kanan sumbu x
center	menempatkan latar belakang di tengah sumbu x
x%	kiri sumbu x adalah 0%, kanan sumbu x adalah 100% nilai persen adalah lebar area penempatan latar belakang yang dihitung dengan mengurangi lebar gambar latar belakang
xpos	jarak horizontal ke kiri. Satuan dapat berupa piksel (seperti 0px) atau lainnya Unit CSS.
xpos offset	gramata berdua, disokong hanya di Firefox dan Safari. xpos disebut kiri atau kanan offset adalah jarak horizontal dari gambar latar belakang dengan kiri atau kanan yang diatur posisi xpos Satuan dapat berupa piksel atau lainnya Unit CSS.
initial	Tetapkan sifat ini ke nilai baku. Lihat: initial.
inherit	Mewarisi sifat ini dari elemen induknya. Lihat: inherit.

Detil teknikal

Nilai baku:	0%
Inheritsi:	tidak
Pembuatan animasi:	disokong. Lihat:Atribut berhubungan dengan animasi.
Versi:	CSS3
Gramata JavaScript:	object.style.backgroundPositionX="center"