Katakan anda mahu meletakkan satu atau dua gambar di laman web. Salah satu cara adalah dengan menggunakan background-imageharta CSS.
Properti ini menggunakan satu atau lebih gambar latar untuk elemen, seperti , seperti yang dijelaskan oleh dokumentasi. Gunakannya untuk alasan estetik, seperti menambahkan latar belakang bertekstur ke laman web anda.
Tambah Imej
Mudah menambahkan gambar menggunakan background-imageharta tanah. Cukup berikan jalan ke gambar dalam url()nilai.
Laluan gambar boleh berupa URL, seperti yang ditunjukkan dalam contoh di bawah:
div { /* Background pattern from Toptal Subtle Patterns */ background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"); height: 400px; width: 100%; } Atau ia boleh menjadi jalan tempatan. Inilah contohnya:
body { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("./images/oriental-tiles.png"); } Tambah Pelbagai Gambar
Anda boleh menggunakan beberapa gambar ke tempat background-imagepenginapan ini.
div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; background-position: right, left; } Itu banyak kod. Mari memecahkannya.
Pisahkan setiap url()nilai gambar dengan koma.
background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); Sekarang letakkan dan tingkatkan gambar anda dengan menggunakan sifat tambahan.
background-repeat: no-repeat, no-repeat; background-position: right, left; Terdapat beberapa sub-sifat yang boleh anda tambahkan pada gambar latar anda, seperti background-repeatdan background-position, yang kami gunakan dalam contoh di atas. Anda bahkan boleh menambahkan kecerunan pada gambar latar.
Lihat bagaimana rupanya ketika kami menyatukan semuanya.
Perkara Pesanan
Urutan yang anda senaraikan gambar anda penting kerana susunan susun. Ini bermaksud gambar pertama yang disenaraikan paling dekat dengan pengguna, menurut dokumentasi. Kemudian, yang seterusnya, dan yang seterusnya, dan seterusnya.
Inilah contohnya.
div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; } Kami telah menyenaraikan dua gambar dalam kod di atas. Gambar pertama (morocco-blue.png) akan berada di hadapan yang kedua (oriental-tiles.png). Kedua-dua gambar mempunyai ukuran yang sama dan kurang kelegapan, jadi kami hanya melihat gambar pertama.
Tetapi jika kita memindahkan gambar kedua (oriental-tiles.png) ke kanan sebanyak 200 piksel, maka anda dapat melihat sebahagian daripadanya (selebihnya tetap tersembunyi).
Inilah rupanya ketika kita menyatukan semuanya.
Bilakah Anda Perlu Menggunakan Gambar Latar?
Terdapat banyak suka mengenai background-imageharta tanah. Tetapi ada kekurangannya.
Gambar mungkin tidak dapat diakses oleh semua pengguna, seperti yang ditunjukkan oleh dokumentasi, seperti mereka yang menggunakan pembaca skrin.
Ini kerana anda tidak dapat menambahkan maklumat teks ke background-imageharta tanah. Kesannya, gambar akan terlepas oleh pembaca skrin.
Gunakan background-imageharta tanah hanya apabila anda perlu menambahkan hiasan pada halaman anda. Jika tidak, gunakan
Dengan cara itu, anda dapat menambahkan teks ke elemen gambar, menggunakan altatribut, yang menggambarkan gambar. Teks yang disediakan akan diambil oleh pembaca skrin.
Fikirkan dengan cara ini: background-imageadalah harta CSS, dan CSS memberi tumpuan kepada persembahan atau gaya; HTML memberi tumpuan kepada semantik atau makna.
Untuk gambar, anda mempunyai pilihan. Sekiranya gambar diperlukan untuk hiasan, maka background-imageharta itu mungkin merupakan pilihan yang baik untuk anda.
Saya menulis mengenai belajar memprogram dan kaedah terbaik untuk melakukannya ( amymhaddad.com).