Bagaimana untuk menetapkan imej latar belakang untuk dipusatkan dalam html/css

Dalam html/css, anda boleh menggunakan atribut kedudukan latar belakang untuk menetapkan imej latar belakang untuk dipusatkan Anda hanya perlu menambah "kedudukan latar belakang: tengah;" pada elemen tempat imej latar belakang ditetapkan, dan anda boleh menetapkan imej latar belakang untuk berada di tengah secara mendatar dan menegak.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Langkah-langkah untuk memusatkan imej latar belakang dalam html/css

Buka alat pembangunan bahagian hadapan dan buat halaman kod html baharu

Buat teg div untuk menetapkan warna latar belakang pada halaman kod html, dan kemudian tambah class = "bg-img" pada teg ini

Tetapkan imej latar belakang. Buat teg gaya, dan kemudian tetapkan imej latar belakang, imej tidak berulang, lebar dan gaya ketinggian untuk kelas bg-img dalam teg. Kod gaya:

.bg-img{
height: 100vh;
width: 100%;
background-image: url(img/car.jpg);
background-repeat: no-repeat;
}

Simpan kod html dan bukanya dengan penyemak imbas Pada masa ini, anda akan mendapati bahawa imej latar belakang pada penyemak imbas dipaparkan dalam sudut kiri atas.

Kembali ke halaman kod html dan tambah gaya background-position: center pada kelas bg-img.

Simpan kod html dan muat semula penyemak imbas Pada masa ini, anda akan mendapati bahawa imej latar belakang pada penyemak imbas telah dipusatkan secara automatik.

Tutorial yang disyorkan: "tutorial video html", "Tutorial video CSS"

Atas ialah kandungan terperinci Bagaimana untuk menetapkan imej latar belakang untuk dipusatkan dalam html/css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!