Bagaimana untuk menyembunyikan gambar dalam css

CSS Sembunyikan Gambar

CSS ialah bahagian penting dalam reka bentuk web. Ia boleh membantu kami mencantikkan halaman web, termasuk reka letak halaman, fon, warna, dll. Selain itu, kami juga boleh menggunakan CSS untuk menyembunyikan elemen yang tidak perlu dan meningkatkan keindahan dan pengalaman pengguna halaman. Artikel ini akan memperkenalkan cara menggunakan CSS untuk menyembunyikan imej.

Dalam reka bentuk web, gambar adalah elemen yang sangat penting, tetapi kadangkala kita perlu menyembunyikan gambar Sebagai contoh, kita tidak mahu memuatkan terlalu banyak gambar pada peranti mudah alih, atau dalam beberapa kes kita perlu menyembunyikannya buat sementara waktu. gambar . Menyembunyikan imej dengan CSS adalah sangat mudah, kita hanya perlu menambah baris kod untuk melengkapkannya.

Pertama, kita perlu memahami beberapa pengetahuan asas tentang CSS. Dalam CSS, kita boleh menggunakan atribut paparan untuk mengawal cara elemen dipaparkan. Ia mempunyai nilai berikut:

• tiada: Unsur tidak dipaparkan, iaitu, ia tersembunyi sepenuhnya.
• blok: Elemen dipaparkan sebagai elemen peringkat blok, biasanya digunakan untuk memaparkan tajuk, perenggan, dsb.
• blok sebaris: Elemen dipaparkan sebagai elemen blok sebaris dan boleh disusun bersama dengan elemen lain.
• sebaris: Elemen dipaparkan sebagai elemen sebaris, biasanya digunakan untuk memaparkan pautan, butang, dsb.

Dengan menggunakan atribut display:none, kami boleh menyembunyikan imej sepenuhnya. Contohnya, coretan kod berikut:

img{

display:none;

}

Dengan cara ini, semua teg img tidak akan dipaparkan lagi. Jika kita hanya mahu menyembunyikan beberapa imej, kita boleh menambah atribut ini pada kelas atau id yang ditentukan:

.hidden{

display:none;

}

Imej kedua dan keempat akan Don jangan tunjukkan lagi.

Selain menggunakan atribut paparan, kami juga boleh menggunakan atribut kelegapan untuk mengawal ketelusan imej. Tetapkan kelegapan kepada 0 dan imej akan menjadi telus sepenuhnya, seolah-olah ia disembunyikan.

img{

opacity:0;

}

Kaedah ini berbeza sedikit daripada menggunakan display:none Ia tidak mengubah kedudukan dan saiz imej, ia hanya berubah ia mesti telus, jadi kadangkala ia boleh digunakan untuk mencipta kesan yang kelihatan tersembunyi.

Perlu diambil perhatian bahawa menggunakan kaedah di atas untuk menyembunyikan imej masih akan memuat turun imej, tetapi ia tidak akan dipaparkan Jika anda ingin mengoptimumkan kelajuan memuatkan halaman web, sebaiknya gunakan JavaScript untuk menangguhkan memuatkan imej hanya apabila anda perlu menggunakannya Baru dimuatkan. Ini boleh dicapai dengan menggunakan beberapa perpustakaan sedia, seperti lazyload.js, unveil.js, dsb.

Ringkasnya, menyembunyikan gambar adalah teknologi yang sangat praktikal dalam reka bentuk web, yang boleh menjadikan halaman lebih cantik dan meningkatkan pengalaman pengguna. Dengan menggunakan ciri paparan:none atau kelegapan CSS, kami boleh menyembunyikan imej dengan mudah.

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