Bagaimanakah Saya Meregangkan atau Mengskalakan Imej Latar Belakang CSS agar Sesuai dengan Bekasnya?

Cara Meregangkan atau Skala Latar Belakang CSS agar Sesuai dengan Bekasnya

Apabila menetapkan imej latar belakang dalam CSS, anda mungkin mahukan ia muat dengan sempurna dalam dimensi bekas atau regangan untuk menutupi seluruh kawasan. CSS menawarkan penyelesaian yang mudah untuk mencapai kesan ini.

Penyelesaian: Gunakan Harta bersaiz latar belakang

CSS3 memperkenalkan sifat bersaiz latar belakang, yang membolehkan anda menentukan saiz dan skala imej latar belakang. Untuk meregangkan atau menskalakan latar belakang untuk mengisi bekasnya, gunakan sintaks berikut:

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or other units */
}

Nilai 100% menunjukkan bahawa latar belakang akan meregang sehingga lebar penuh bekasnya, manakala nilai auto membenarkan ketinggian untuk melaraskan secara automatik untuk mengekalkan nisbah aspek asal imej.

Keserasian

Ini penyelesaian disokong oleh penyemak imbas moden sejak 2012, termasuk Chrome, Firefox, Safari dan Edge. Untuk penyemak imbas yang lebih lama, anda boleh mempertimbangkan untuk menggunakan awalan vendor, seperti -webkit atau -moz, untuk memastikan keserasian.

Atas ialah kandungan terperinci Bagaimanakah Saya Meregangkan atau Mengskalakan Imej Latar Belakang CSS agar Sesuai dengan Bekasnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!