Comment masquer des images en CSS

CSS Hidden Pictures

CSS est un élément essentiel de la conception Web. Il peut nous aider à embellir les pages Web, y compris la mise en page, les polices, les couleurs, etc. De plus, nous pouvons également utiliser CSS pour masquer les éléments inutiles et améliorer la beauté et l'expérience utilisateur de la page. Cet article explique comment utiliser CSS pour masquer des images.

Dans la conception Web, les images sont des éléments très importants, mais nous devons parfois masquer les images. Par exemple, nous ne voulons pas charger trop d'images sur les appareils mobiles ou, dans certains cas, nous devons masquer temporairement les images. C'est très simple de masquer des images avec CSS, il suffit d'ajouter une ligne de code pour le compléter.

Tout d’abord, nous devons comprendre quelques connaissances de base en CSS. En CSS, nous pouvons utiliser l'attribut display pour contrôler la façon dont les éléments sont affichés. Il a les valeurs suivantes :

• none : L'élément n'est pas affiché, c'est-à-dire qu'il est complètement masqué.
• block : L'élément est affiché comme un élément de niveau bloc, généralement utilisé pour afficher des titres, des paragraphes, etc.
• inline-block : l'élément est affiché comme un élément de bloc en ligne et peut être disposé avec d'autres éléments.
• inline : les éléments sont affichés sous forme d'éléments en ligne, généralement utilisés pour afficher des liens, des boutons, etc.

En utilisant l'attribut display:none, nous pouvons masquer complètement l'image. Par exemple, l'extrait de code suivant :

img{

display:none;

}

De cette façon, toutes les balises img ne seront plus affichées. Si nous voulons uniquement masquer certaines images, nous pouvons ajouter cet attribut à la classe ou à l'identifiant spécifié :

.hidden{

display:none;

}

<img src="img1.jpg" alt="Image 1">
<img src="img2.jpg" class="caché" alt="Image 2">
<img src="img3.jpg" alt="Image 3">
<img src=" img4.jpg" class="hidden" alt="Image 4">

Les deuxième et quatrième images ne seront plus affichées.

En plus d'utiliser l'attribut display, nous pouvons également utiliser l'attribut opacity pour contrôler la transparence de l'image. Réglez l'opacité sur 0 et l'image deviendra complètement transparente, comme si elle était cachée.

img{

opacity:0;

}

Cette méthode est un peu différente de l'utilisation de display:none. Elle ne change pas la position et la taille de l'image, elle la rend simplement transparente, donc parfois elle peut être utilisée pour créer une image. cela ressemble à des effets cachés.

Il convient de noter que l'utilisation de la méthode ci-dessus pour masquer les images téléchargera toujours les images, mais elles ne seront pas affichées. Si vous souhaitez optimiser la vitesse de chargement des pages Web, il est préférable d'utiliser JavaScript pour retarder le chargement des images et uniquement. chargez-les lorsque vous en avez besoin. Ceci peut être réalisé en utilisant certaines bibliothèques prêtes à l'emploi, telles que lazyload.js, unveil.js, etc.

En bref, cacher des images est une technologie très pratique en conception Web, qui peut rendre la page plus belle et améliorer l'expérience utilisateur. En utilisant les propriétés display:none ou opacity de CSS, nous pouvons facilement masquer l'image.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!