Bagaimana untuk menetapkan latar belakang imej dalam html? Pengenalan kepada sifat latar belakang

Dalam reka bentuk web, kadangkala kita perlu menggunakan gambar sebagai latar belakang untuk mencantikkan halaman web. HTML menyediakan pelbagai kaedah untuk menetapkan latar belakang imej Artikel ini akan memperkenalkan cara menggunakan atribut latar belakang CSS untuk menetapkan latar belakang imej.

1 Gunakan atribut imej latar belakang untuk menetapkan latar belakang imej

Atribut imej latar belakang digunakan untuk menetapkan imej latar belakang elemen. dan boleh digabungkan dengan sifat latar belakang yang lain digunakan bersama.

Sintaks adalah seperti berikut:

background-image: url(path);

Antaranya, url() menentukan laluan imej, yang boleh menjadi laluan relatif atau laluan mutlak. Contohnya, kod berikut menetapkan latar belakang imej:

body {
  background-image: url(bg.jpg);
}

Dalam contoh ini, imej bg.jpg akan digunakan sebagai latar belakang keseluruhan halaman. Perlu diingatkan bahawa dalam HTML, kami meletakkan kod CSS ini dalam teg gaya atau dalam fail CSS luaran.

2. Gunakan atribut background-repeat dan background-position attribute

Kita biasanya juga perlu menetapkan kaedah ulangan dan kedudukan imej Pada masa ini, kita perlu menggunakan latar belakang atribut -ulang dan atribut kedudukan latar belakang .

1. atribut ulang latar belakang

Atribut ulang latar belakang digunakan untuk menetapkan mod ulangan imej latar belakang Ia boleh mengambil nilai berikut:

• ulang : Nilai lalai, imej latar belakang akan diulang secara mendatar dan menegak.
• ulang-x: Ulang dalam arah mendatar sahaja.
• ulang-y: Ulang hanya dalam arah menegak.
• tiada ulangan: Jangan paparkan berulang kali.

Sebagai contoh, dalam kod berikut, tetapkan imej latar belakang untuk mengulang hanya secara mendatar:

body {
  background-image: url(bg.jpg);
  background-repeat: repeat-x;
}

2. sifat kedudukan latar belakang

atribut kedudukan latar belakang digunakan untuk menetapkan kedudukan permulaan imej latar belakang, yang boleh mengambil nilai berikut:

• atas: Imej latar belakang dipaparkan dari atas.
• bawah: Imej latar belakang dipaparkan dari bawah.
• tengah: Imej latar belakang dipaparkan di tengah.
• kiri: Imej latar belakang dipaparkan dari kiri.
• kanan: Imej latar belakang dipaparkan dari sebelah kanan.

Biasanya kita boleh menetapkan sifat kedudukan latar belakang dengan cara berikut:

body {
  background-position: x-axis y-axis;
}

Di mana, paksi-x dan paksi-y mewakili offset dari kiri dan atas ( Nilai khusus boleh dalam piksel, peratusan, dsb.). Jika hanya satu nilai ditetapkan, lalai ialah mengimbangi mendatar dan mengimbangi menegak menjadi lalai kepada penjajaran tengah.

Contohnya:

body {
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
}

Dalam contoh ini, tetapkan imej latar belakang supaya tidak berulang dan dipaparkan dari bahagian atas tengah.

3. Gunakan atribut saiz latar belakang

Atribut saiz latar belakang digunakan untuk menetapkan saiz imej latar belakang. Boleh mengambil nilai berikut:

• auto: Nilai lalai, imej latar belakang dipaparkan dalam saiz asalnya.
• kulit: Skala imej latar belakang untuk menutup sepenuhnya kawasan elemen (imej latar belakang mungkin dipangkas).
• mengandungi: Kecilkan imej latar belakang sebanyak mungkin agar sesuai sepenuhnya dengan kawasan elemen (mungkin terdapat sedikit ruang putih).
• Nyatakan saiz: Anda boleh menentukan saiz imej latar belakang menggunakan unit seperti piksel dan peratusan.

Sebagai contoh, dalam kod berikut, imej latar belakang ditetapkan sekecil mungkin agar sesuai sepenuhnya dengan kawasan elemen:

body {
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}

Ringkasan

Oleh menggunakan atribut latar belakang , kita boleh menetapkan imej latar belakang halaman web dengan mudah. Melalui empat atribut imej latar belakang, ulangan latar belakang, kedudukan latar belakang dan saiz latar belakang, kami boleh menetapkan laluan, kaedah ulangan, kedudukan permulaan dan saiz imej Sila gunakan secara fleksibel mengikut keperluan anda.

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