Bagaimana untuk menyembunyikan gambar dalam css? Analisis ringkas dua kaedah

Dalam reka bentuk web, penyembunyian imej adalah teknik yang sangat biasa. Menyembunyikan gambar boleh menjadikan halaman web lebih cantik dan kemas, dan juga boleh mengurangkan masa memuatkan halaman web dan meningkatkan pengalaman akses pengguna. Pada masa ini, menggunakan helaian gaya CSS untuk menyembunyikan imej telah menjadi salah satu teknologi standard dalam reka bentuk web. Dalam artikel ini, kami akan menunjukkan kepada anda cara menyembunyikan imej menggunakan helaian gaya CSS.

Pertama, kita perlu memahami apa itu helaian gaya CSS. CSS ialah singkatan Cascading Style Sheets, dan nama Cinanya Cascading Style Sheets. Helaian gaya CSS digunakan untuk mengawal gaya dan reka letak halaman web, termasuk fon, warna, reka letak, imej dan banyak lagi. Untuk menggunakan helaian gaya CSS untuk menyembunyikan imej, anda perlu menggunakan sifat paparan dan sifat keterlihatan CSS.

(1) Gunakan paparan:none untuk menyembunyikan imej

display:none ialah salah satu atribut yang paling biasa digunakan untuk menyembunyikan elemen dalam helaian gaya CSS. Apabila kami menetapkan sifat paparan elemen kepada tiada, elemen itu tidak akan dipaparkan. Berikut ialah contoh mudah:

Kod HTML:

<img src="https://example.com/image.png">

Kod CSS:

img {
    display: none;
}

Dalam kod di atas, kami menukar paparan semua tag img The harta ditetapkan kepada tiada. Dengan cara ini, semua imej pada halaman web akan disembunyikan. Apabila kita perlu memaparkan imej, kita hanya perlu menukar nilai atribut paparan tag img kepada menyekat atau menyekat sebaris untuk memaparkannya.

(2) Gunakan keterlihatan:tersembunyi untuk menyembunyikan imej

Tidak seperti paparan:tiada, keterlihatan:tersembunyi boleh menyembunyikan unsur, tetapi elemen masih menempati ruang halaman web. Elemen dengan visibility:hidden masih akan mengekalkan ruang pada halaman, tetapi tidak akan dipaparkan lagi. Berikut ialah contoh mudah:

Kod HTML:

<img src="https://example.com/image.png">

Kod CSS:

img {
    visibility: hidden;
}

Dalam kod di atas, kami menukar keterlihatan semua tag img harta ditetapkan kepada tersembunyi. Dengan cara ini, semua imej dalam halaman web akan disembunyikan, tetapi ia masih akan menduduki ruang asal. Apabila kita perlu memaparkan imej, kita hanya perlu menukar nilai atribut keterlihatan teg img kepada kelihatan untuk memaparkannya.

Ringkasan

Dalam reka bentuk web, penyembunyian imej adalah teknik yang sangat biasa. Salah satu kaedah yang paling biasa ialah menggunakan lembaran gaya CSS untuk menyembunyikan imej. Kita boleh menyembunyikan imej sepenuhnya dengan atribut display:none, atau kita boleh menyembunyikan imej tetapi mengekalkan ruangnya dengan atribut visibility:hidden. Dengan menggunakan atribut ini, kami boleh mengurangkan masa memuatkan halaman web, meningkatkan pengalaman akses pengguna, dan juga menjadikan halaman web lebih cantik dan kemas.

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan gambar dalam css? Analisis ringkas dua kaedah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!