Comment remplacer les images CSS

Ces dernières années, avec le développement rapide de la technologie Internet, une attention de plus en plus grande a été accordée à l'esthétique des pages des sites Web. En tant qu’élément de conception important dans la conception d’un site Web, les images jouent un rôle irremplaçable. Cependant, dans le processus de développement quotidien, une modification appropriée de l'image permet de mieux ajuster le style de la page Web. Le remplacement des images CSS, comme l'un des moyens techniques importants, est progressivement devenu connu des développeurs Web.

1. Qu'est-ce que le remplacement d'image CSS ?

Avant d'introduire le remplacement d'images CSS, nous devons comprendre certains concepts de base sur les propriétés calculées et les propriétés d'affichage CSS. Les attributs calculés peuvent être simplement compris comme le navigateur analysant la feuille de style et calculant les valeurs d'attribut finales générées, y compris, mais sans s'y limiter, la taille du texte, la couleur, le style de police et d'autres éléments. L'attribut display est le style de page rendu final.

Le principe du remplacement d'image CSS est de remplacer l'adresse d'origine de l'image dans l'étape de calcul des attributs pour obtenir l'effet de changement de l'image de la page. Généralement, nous utilisons la balise dans le code HTML pour insérer des images, puis les remplaçons via l'attribut CSS background ou l'attribut content.

2. Trois façons d'implémenter le remplacement d'images CSS

1. Utilisez l'attribut background pour remplacer les images

C'est la méthode la plus couramment utilisée. Il convient de noter que dans cette méthode, vous devez prêter attention au problème de trafic lié aux demandes d’images. Parce que la méthode de requête de l'image d'arrière-plan est une requête GET (c'est-à-dire demander au serveur de télécharger des ressources), et cette requête est effectuée avec le code HTML et JS.

(1) Remplacez l'image par l'attribut background dans le fichier CSS

Exemple de code :

.demo{
    width: 200px;
    height: 150px;
    background: url('./images/demo.png') no-repeat center center / contain;
}

Dans l'exemple, nous définissons l'image d'arrière-plan sur demo.png, et la définissons pour qu'elle soit centrée et adaptative en largeur et en hauteur. .
(2) Remplacez les images par des styles en ligne en HTML

Exemple de code :

<div style="width: 200px; height: 150px; background: url(&#39;./images/demo.png&#39;) no-repeat center center / contain;"></div>

2 Utilisez l'attribut content pour remplacer les images

L'attribut content peut être utilisé pour définir des pseudo-éléments, combinés avec des pseudo-éléments tels que :before ou :après la classe, remplacez l'image via l'attribut content. Cette méthode est largement utilisée. Elle peut non seulement remplacer les images, mais aussi produire des effets plus pratiques.

Exemple de code :

.demo:before{
    content: "";
    display: block;
    width: 200px;
    height: 150px;
    background: url('./images/demo.png') no-repeat center center / contain;
}

Dans cet exemple, nous utilisons le pseudo-élément :before pour générer un élément alternatif avec une largeur et une hauteur de 200px*150px, une image d'arrière-plan demo.png et un affichage centré.

3. Utilisez la bibliothèque de sprites SVG pour remplacer

La bibliothèque de sprites SVG est un moyen technique similaire à la bibliothèque de sprites CSS. Il fusionne d'abord plusieurs images SVG et sélectionne la position de la fenêtre d'une image souhaitée via les propriétés CSS background-image et background-position pour obtenir l'effet de remplacement d'image.

Exemple de code :

.demo{
    width: 100px;
    height: 100px;
    background-image: url('./images/smile-icon.svg');
    background-position: -20px -10px;
}

Dans cet exemple, nous référençons une bibliothèque de sprites SVG nommée smile-icon et supprimons la position de la fenêtre d'affichage de son image requise via la propriété background-position.

3. Analyse des avantages et des inconvénients du remplacement d'image CSS

Pour la technologie de remplacement d'image CSS, ses avantages et inconvénients sont évidents.

Avantages :

1. Forte flexibilité

La technologie de remplacement d'images CSS peut contrôler de manière flexible la taille et la position des images de page et d'autres attributs pour répondre aux besoins des différents styles de conception de page.

2. Réduire les requêtes du serveur

Grâce au remplacement de l'image CSS, nous pouvons télécharger les éléments de l'image requise en une seule fois via la feuille de style CSS, réduisant ainsi les requêtes du serveur.

3. Vitesse de page améliorée

Grâce à la méthode ci-dessus, le nombre de requêtes peut être réduit et le temps de chargement de la page peut être réduit, améliorant ainsi la vitesse de la page.

Inconvénients :

1. Impact sur le référencement

Pour les moteurs de recherche, lorsque les visiteurs recherchent du contenu, ils ne peuvent pas obtenir d'informations sur les images des pages. Étant donné que les moteurs de recherche ne peuvent pas lire les informations sur les images dans les styles CSS, cette technologie n'est pas applicable à certains sites Web nécessitant un référencement.

2. Pas convivial pour les utilisateurs spéciaux

Pour les visiteurs qui espèrent pouvoir désactiver les styles CSS ou utiliser des lecteurs d'écran pour lire des pages Web, le remplacement des images CSS entravera leur expérience.

4. Résumé

La technologie de remplacement d'images CSS est une partie très importante du développement Web. Elle peut optimiser efficacement l'effet d'affichage des images de page. Grâce aux méthodes présentées dans cet article, nous pouvons facilement maîtriser les compétences de remplacement d'images CSS, obtenant ainsi plus facilement les effets de page souhaités.

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!