css - Bagaimana untuk menulis susun atur responsif dengan imej latar belakang
怪我咯2017-07-06 10:37:20
0
3
2087
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
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.
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Cubalah
background-size: cover;kedudukan latar belakang, digunakan bersama dengan saiz latar belakang, adakah anda telah mencubanya
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:
- reka letak, saiz fon, gambar penjimatan aliran yang disesuaikan
Jika ia adalah pembangunan komponen, anda masih boleh menggunakan
untuk mentakrifkanSistem susun atur grid 12 lajur (lebar, apungan, tindak balas berurutan);
position属性或flex).parameter sebaris
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).props, dan kemudian komponen akan menentukan gaya reka letak secara dalaman (beberapa reka letak dipratetap ); Untuk imej latar belakang, anda boleh menggunakan atributbackground-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!