Imej Latar Belakang Boleh Skala: Mengekalkan Nisbah Aspek
Dalam reka bentuk web, menetapkan imej latar belakang yang sesuai dengan dimensi halaman dengan lancar boleh menjadi tugas yang sukar. Selalunya, pembangun menghadapi masalah dengan imej yang diregangkan atau dipotong secara tidak seimbang, yang membawa kepada hasil yang tidak diingini. Walau bagaimanapun, CSS3 menyediakan penyelesaian yang elegan untuk masalah ini dengan sifat saiz latar belakang.
Sifat saiz latar belakang membolehkan anda menentukan saiz imej latar belakang anda dalam pelbagai cara. Untuk mengekalkan nisbah bidang imej anda sambil memastikan ia sesuai dengan dimensi elemen badan anda, gunakan nilai penutup.
Dengan menetapkan saiz latar belakang kepada penutup, imej akan berskala secara automatik kepada saiz terkecil yang mungkin sepenuhnya meliputi kawasan kedudukan latar belakang. Ini bermakna imej akan sentiasa memenuhi keseluruhan lebar halaman, manakala ketinggiannya dilaraskan untuk mengekalkan perkadaran asal.
Sebagai contoh, pertimbangkan kod berikut:
1 2 3 4 5 6 |
|
CSS ini akan pastikan imej background.svg sesuai dengan keseluruhan lebar halaman, manakala ketinggiannya berskala sewajarnya untuk mengekalkan perkadarannya utuh.
Memahami Contain vs. Cover
Dalam CSS3, terdapat dua nilai utama untuk sifat bersaiz latar belakang: mengandungi dan penutup. Walaupun kedua-dua nilai mengekalkan nisbah bidang imej, ia berkelakuan berbeza.
Cara yang berguna untuk menggambarkan perbezaan antara kandungan dan penutup ialah membayangkan segi empat tepat mewakili skrin anda dan segi empat tepat mewakili imej anda.
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek Apabila Menetapkan Imej Latar Belakang Boleh Skala dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!