Bagaimanakah Saya Boleh Membuat Imej Latar Belakang Responsif Menggunakan CSS?

Mencapai Imej Latar Belakang Responsif dengan CSS

Dalam reka bentuk web, selalunya diingini untuk mempunyai imej latar belakang yang menyesuaikan diri secara dinamik kepada saiz skrin yang berbeza. Untuk mencapai matlamat ini, anda mahukan lebar imej sesuai dengan ruang yang tersedia, sambil mengekalkan nisbah bidangnya dan menskalakan ketinggian secara berkadar.

Menggunakan saiz latar belakang: penutup;

Untuk mencapainya, CSS3 menawarkan sifat saiz latar belakang. Secara khususnya, menetapkannya kepada penutup memastikan imej latar belakang berskala untuk memenuhi keseluruhan ruang yang tersedia, mengekalkan perkadarannya. Imej akan dipangkas secara menegak jika perlu agar muat, membenarkan penatalan menegak tanpa pengulangan mendatar.

Berikut ialah contoh kod yang menunjukkan perkara ini:

body {
    background-image: url(images/background.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Cara Mengandungi dan Penutup Berbeza

Mengandungi: Skala imej agar muat sepenuhnya dalam kawasan kedudukan latar belakang sambil mengekalkan nisbah aspeknya. Ini mungkin menyebabkan ruang kosong di sekeliling imej.

Penutup: Skala imej untuk meliputi keseluruhan kawasan kedudukan latar belakang sambil mengekalkan nisbah bidangnya. Ini mungkin mengakibatkan pemangkasan imej agar muat.

Memahami Kesan Visual

Pertimbangkan imej dengan resolusi 4x3 digunakan sebagai latar belakang untuk skrin 16x9.

Mengandungi: Imej muat dalam skrin tetapi meninggalkan ruang kosong pada kedua-duanya sebelah.

Sampul: Imej menutupi keseluruhan skrin tetapi memotong sebahagian di bahagian atas dan bawah.

Untuk menggambarkan perbezaan ini, berikut ialah demonstrasi:

<div class="contain">
    <!-- Background image will fit, leaving empty space -->
</div>
<div class="cover">
    <!-- Background image will cover, cropping as needed -->
</div>

.contain, .cover {
    width: 20em;
    height: 10em;
    background-image: url(example.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #ccc;
    border: 1px solid;
}

.contain {
    background-size: contain;
}

.cover {
    background-size: cover;
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Imej Latar Belakang Responsif Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!