Bagaimana untuk Mencipta Imej Latar Belakang Responsif Skrin Penuh dalam CSS?

Membuat Imej Latar Belakang Responsif Skrin Penuh dalam CSS

Untuk mencipta imej latar belakang yang merangkumi keseluruhan halaman web dan melaraskan secara dinamik kepada pelbagai saiz skrin, ikut langkah berikut:

1. Tetapkan Imej Latar Belakang:

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

2. Lampiran Latar Belakang Kawalan (Pilihan):

• lampiran latar belakang: tatal; membetulkan imej berbanding halaman web, sementara halaman menatal.
• lampiran latar belakang: tetap; mengekalkan imej di tempatnya sambil menatal halaman.

3. Tetapkan Kedudukan Latar Belakang:**

• Ini memastikan imej meliputi keseluruhan skrin dengan meletakkannya di tengah, menggunakan kedudukan latar belakang: tengah tengah;.

4. Tetapkan Saiz Latar Belakang:**

• Gunakan saiz latar belakang: penutup; untuk menjadikan dimensi imej meliputi keseluruhan halaman web.

5. Betulkan Pepijat Safari (Pilihan):**

• Sebaliknya, gunakan yang berikut (tidak termasuk Safari):

  background: url('image.jpg') fixed 50% / cover;

Contoh Kod:

body {
    background: url('image.jpg') fixed 50% / cover;
}

Nota: Laraskan kedudukan latar belakang dan pilihan lampiran seperti yang dikehendaki untuk mengoptimumkan penampilan imej pada pelbagai peranti.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Imej Latar Belakang Responsif Skrin Penuh dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!