css - Bagaimana untuk menulis susun atur responsif dengan imej latar belakang

Question

Sama seperti ini, saya sekarang ingin membuat komponen dengan imej latar belakang, tetapi imej latar belakang tidak boleh 100%, dan kemudian mesti ada kandungan di tengah, imej di sebelah kiri dan teks di sebelah kanan jadikan ia responsif

Answer 1

Cubalah background-size: cover;

Answer 2

kedudukan latar belakang, digunakan bersama dengan saiz latar belakang, adakah anda telah mencubanya

Answer 3

Anda boleh mengkaji dengan teliti beberapa halaman Apple Beberapa halamannya menggunakan imej latar belakang dan menyesuaikan diri - sudah tentu, reka letaknya juga agak mudah. Prinsipnya ialah CSS3 Media Query.

Saya biasanya menggunakan 2 penyelesaian:

• Sistem susun atur grid 12 lajur (lebar, apungan, tindak balas berurutan);

Penyesuaian Pertanyaan Media (gunakan
• reka letak, saiz fon, gambar penjimatan aliran yang disesuaikan

  position 属性或 flex).

Jika ia adalah pembangunan komponen, anda masih boleh menggunakan

untuk mentakrifkan

parameter sebarisprops, dan kemudian komponen akan menentukan gaya reka letak secara dalaman (beberapa reka letak dipratetap ); Untuk imej latar belakang, anda boleh menggunakan atribut

untuk melaksanakan paparan imej adaptif (autoisi), atau anda boleh menggunakan Media Query untuk menentukan paparan berbeza pada peranti berbeza (contohnya: imej desktop mempunyai lebar yang lebih lebar daripada ketinggian, mudah alih imej skrin menegak mempunyai ketinggian lebih besar daripada lebar) ) gambar (menjimatkan trafik).

background-size 或 background-position: center centerSaya fikir: Cuba untuk tidak menggunakan latar belakang sebagai sebahagian daripada reka letak kandungan, melainkan pereka bentuk menyediakan anda dengan saiz dan pelan penyesuaian imej yang mencukupi!