Pada masa kini, laman web dengan imej latar belakang responsif sangat diminati. Tapak web responsif memberikan pengguna pengalaman pengguna yang ideal pada hampir semua peranti termasuk mudah alih, tablet atau desktop. Imej responsif boleh menyesuaikan latar belakang tapak web, saiz skrin dan dimensi. Imej responsif memastikan kualiti dan perkadaran dikekalkan. Selain itu, tapak web dengan imej latar belakang responsif dimuatkan dengan cepat.
Panduan ini akan memberikan arahan untuk menyesuaikan imej latar belakang kepada dimensi skrin.
Bagaimana untuk Menyesuaikan Imej Latar Belakang kepada Dimensi Skrin?
Imej boleh menyesuaikan diri dengan dimensi skrin dengan melalui arahan langkah demi langkah yang diberikan di bawah.
Langkah 1: Buat Struktur HTML
Mula-mula, buat struktur HTML dan tambah helaian gaya luaran menggunakan
< html >
< kepala >
< pautan rel = 'lembaran gaya' href = 'style.css' >
< tajuk > Imej Latar Belakang Responsif tajuk >
kepala >
< badan >
-- Kawasan untuk menambah kandungan lain-- >
badan >
html >
Langkah 2: Gunakan CSS
Sekarang, gunakan CSS pada ' badan ” bahagian. Pertama, nyatakan imej latar belakang. Untuk tujuan itu, gunakan ' imej latar belakang ” dan nyatakan “ url() ” nilai yang mengandungi alamat fail imej.
Selepas itu, gunakan ' imej latar belakang 'untuk menentukan saiz imej, ' latar belakang-ulang ' harta untuk menetapkan pengulangan imej, dan ' lampiran latar belakang ” untuk menetapkan sama ada imej menatal dengan seluruh halaman atau tidak. Akhir sekali, tetapkan ' margin ” dan “ padding ” kepada “ 0 ”:
badan {imej latar belakang: url ( 'test-image.jpg' ) ;
saiz latar belakang: 100 % 100 % ;
/* Skalakan imej kepada 100 % lebar dan 100 % ketinggian */
background-repeat: tiada-ulang;
lampiran latar belakang: tetap;
margin: 0 ;
padding: 0 ;
/* Pilihan: Latar belakang tetap */
}
Pengeluaran
Ini adalah output sebelum menguncup tetingkap penyemak imbas:
Selepas Penguncupan penyemak imbas:
Output di atas mengesahkan bahawa imej telah menyesuaikan latar belakang kepada dimensi skrin.
Kesimpulan
Untuk menyesuaikan imej latar belakang kepada dimensi skrin, pertama sekali, sertakan ' tempat pandang ” di bahagian kepala untuk mengawal dimensi dan penskalaan. Kemudian, buat struktur HTML dan gunakan CSS. Dalam CSS, tetapkan “ saiz latar belakang ” nilai harta kepada “ penutup nilai ” untuk skala ketinggian dan lebar imej. Artikel ini telah membentangkan panduan lengkap untuk menyesuaikan imej latar belakang kepada dimensi skrin.