Jadwal Pelajaran

Panduan Referensi CSS

属性 CSS

Kursus Pilihan

Rekomendasi Kursus:

Panduan CodeW3C.com

Atribut background-position-x CSS

halaman sebelumnya background-position
Halaman berikutnya background-position-y

Definisi dan penggunaan

background-position-x Properti menentukan posisi gambar latar belakang di sumbu x.

Peringatan:Secara default, gambar latar belakang ditempatkan di pojok kiri atas elemen dan diulangi di arah vertikal dan horizontal.

Contoh

Contoh 1

Bagaimana cara menempatkan gambar latar belakang di sumbu x:

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

Coba sendiri

Contoh 2

Bagaimana cara menempatkan gambar latar belakang di posisi kanan:

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

Coba sendiri

Contoh 3

Bagaimana cara menempatkan gambar latar belakang dengan penggunaan persen:

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

Coba sendiri

Contoh 4

Bagaimana cara menempatkan gambar latar belakang dengan penggunaan pixel:

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

Coba sendiri

Contoh 5

Membuat gambar latar belakang yang menutupi kontainernya dengan properti latar belakang yang berbeda:

.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; /* Sesuaikan ukuran gambar latar belakang untuk menutup seluruh kontainer */
}

Coba sendiri

Grammar CSS

background-position-x: value;

Nilai atribut

Nilai	Deskripsi
left	Menempatkan posisi latar belakang di kiri sumbu x.
right	Menempatkan posisi latar belakang di kanan sumbu x.
center	Menempatkan posisi latar belakang di tengah sumbu x.
x%	Kiri sumbu x adalah 0%, kanan sumbu x adalah 100%. Nilai persen menunjukkan lebar area pengiriman latar belakang yang diambil dari lebar area pengiriman latar belakang yang diambil dari lebar gambar latar belakang.
xpos	Jarak dari kiri ke horisontal. Satuan dapat berupa piksel (seperti 0px) atau lainnya Satuan CSS.
xpos offset	Grammar dual, didukung hanya di Firefox dan Safari. xpos Ditetapkan sebagai kiri atau kanan offset Adalah jarak horisontal antara gambar latar belakang dengan posisi kiri atau kanan yang diatur di xpos Satuan dapat berupa piksel atau lainnya Satuan CSS.
initial	Atur atribut ini ke nilai default. Lihat initial.
inherit	Mengambil atribut ini dari elemen induk. Lihat inherit.

Detil teknis

Nilai default:	0%
Inheritance:	Tidak
Pembuatan animasi:	Didukung. Lihat:Atribut yang berhubungan dengan animasi.
Versi:	CSS3
Grammar JavaScript:	object.style.backgroundPositionX="center"