Que sont les sprites CSS ? Résumé des compétences des sprites CSS

Le sprite CSS doit être maîtrisé en tant que personnel frontal, mais c'est difficile pour les étudiants qui viennent d'apprendre. Je partagerai ce contenu spécifiquement. Il n'y a pas d'adresse d'image réseau ici. complet, vous pouvez le consulter sur mon blog personnel

Les sprites CSS sont appelés sprites css par de nombreuses personnes en Chine et sont une méthode de traitement d'applications d'images Web. Il vous permet d'inclure toutes les images dispersées impliquées dans une page dans une seule grande image, de sorte que lors de l'accès à la page, les images chargées ne seront pas affichées une par une comme auparavant. Pour la vitesse du réseau populaire actuelle, le temps de chargement requis pour une seule image ne dépassant pas 200 Ko est fondamentalement le même, il n'y a donc pas lieu de s'inquiéter de ce problème. La clé de l’accélération n’est pas de réduire le poids, mais de réduire le nombre d’unités. La découpe d'image traditionnelle fait attention à la précision. Plus la taille de l'image est petite, mieux c'est, et plus le poids est petit, mieux c'est. En fait, la taille n'a pas d'importance, les ordinateurs sont tous calculés en octets. Chaque fois que le client affiche une image, il envoie une requête au serveur. Par conséquent, plus il y a de photos, plus il y a de demandes et plus les risques de retard sont grands.

CSS Sprites intègre en fait certaines images d'arrière-plan de la page Web dans un fichier image, puis utilise la combinaison de CSS "background-image", "background-repeat" et "background-position" pour le positionnement en arrière-plan, background-position peut utiliser des nombres pour localiser avec précision la position de l'image d'arrière-plan.

Ci-dessous, j'expliquerai en détail ses techniques d'utilisation, ce qui vous donnera une compréhension claire et nouvelle des chaussures pour enfants que vous ne comprenez pas actuellement. Bien qu'il existe actuellement de tels outils, vous devez encore comprendre ses principes. et les techniques d'abord. Cela complétera également le positionnement très rapidement si vous le faites sexuellement. Je partagerai un cas ci-dessous.

Tout d'abord, laissez-moi vous expliquer que puisque les arrière-plans qui doivent être positionnés sont tous fusionnés en une seule image, ils sont tous de taille unique, soit les coordonnées de l'axe X sont les mêmes, soit les mêmes. Les coordonnées de l'axe Y sont les mêmes. C'est moi. Il existe 2 types décrits ci-dessous.

1. Coordonnées de positionnement horizontal

Les coordonnées de positionnement horizontal signifient que la coordonnée de l'axe Y est fixe. Sa caractéristique est que la hauteur de chaque icône est cohérente et que l'arrière-plan est modifié en changeant la position de la coordonnée x. Mesurez simplement la largeur de chaque icône pour connaître la coordonnée de l'axe x. Si vous ne connaissez toujours pas cette règle, je vais vous l’expliquer ci-dessous. Prenons deux cas que j’ai réalisés comme exemples.

Expliquons comment positionner en détail. Ici, nous changeons la coordonnée X en position.

Comme les hauteurs sont les mêmes, les coordonnées sur l'axe Y sont toutes 0 ou top

J'utilise une travée comme arrière-plan pour chaque icône ici. Analysons le code en détail :

<div class="join c">
            <strong>Join us on:</strong>
            <ul class="c">
                <li><a href="https://www.facebook.com/Fancyladies"><span class="sl">Facebook</span><span class="sharelogo facebookLogo"></span></a></li>
                <li><a href="http://pinterest.com/fancyladies/ "><span class="sl">Pinterest</span><span class="sharelogo pinterestLogo"></span></a></li>
                <li><a href="https://twitter.com/fancyladiescorp"><span class="sl">Twitter</span><span class="sharelogo twitterLogo"></span></a></li>
                <li><a href="http://www.flickr.com/photos/fancyladies"><span class="sl">flickr</span><span  class="sharelogo flickrLogo"></span></a></li>
                <li><a href="http://www.youtube.com/user/fancyladiescom"><span class="sl">Youtube</span><span class="sharelogo youtubeLogo"></span></a></li>
                <li><a href="http://www.fancyladies.com/blog/"><span class="sl">Blog</span><span class="sharelogo blogLogo"></span></a></li>
            </ul>
        </div>

Voici le code CSS :

.sharelogo{display:inline-block;*display:inline;*zoom:1;height:46px;background-image:url(../images/shareIcon.jpg);background-repeat:none;}
 
.facebookLogo{background-position:0 0;width:20px;}
 
.pinterestLogo{background-position:-20px 0;width:42px;}
 
.twitterLogo{background-position:-62px 0;width:30px;}/**/
 
.flickrLogo{background-position:-92px 0;width:130px;}
 
.youtubeLogo{background-position:-222px 0;width:98px}
 
.blogLogo{background-position:-320px 0;width:84px;}
 
.sl{float:left;padding-right:10px;}

Leurs images d'arrière-plan partagent toutes cet arrière-plan : background-image:url(../images/shareIcon.jpg);

L'arrière-plan de chaque élément ne peut pas être répété : c'est-à-dire : background-repeat:no-repeat;

Après avoir lu ceci, vous trouverez une règle, c'est-à-dire les coordonnées de chaque élément est égal aux coordonnées de la valeur de l'élément précédent plus la largeur. C'est-à-dire que la formule de la valeur des coordonnées horizontales de l'élément est égale à. La valeur des coordonnées de l'élément adjacent plus la largeur.

La valeur de pinterestLogo est égale à la valeur de coordonnée de facebookLogo 20px + la largeur de facebookLogo 20px N'est-ce pas très simple, tant que vous connaissez la largeur de l'élément, car les coordonnées horizontales doivent être étant donné une largeur fixe, cette mesure de la largeur en une seule étape n'est donc pas une perte de temps. J'espère examiner de plus près le modèle de valeurs de coordonnées dans le code source.

Peu importe le positionnement horizontal ou vertical, leur position de départ est background-position : 0 0 ; tandis que lors du positionnement horizontal, la hauteur est fixe, il vous suffit donc de changer la coordonnée X à chaque fois. La valeur est réalisée .

Par exemple, le logo de Facebook est l'icône de la position de départ, donc sa valeur de coordonnée est 0,0, ce qui réalise son positionnement.

Ensuite, le logo Pinterest est celui en dessous, qui est calculé à partir de la valeur négative de la largeur de Facebook. Puisque la largeur de Facebook est de 21 px ; les coordonnées du logo Pinterest sont donc background-position : -20px 0 ; et ainsi de suite

twitterLogo est celui situé sous pinterstLogo, puis utilisez la valeur de coordonnée de pinterstLogo plus pinterstlogo<🎜 >

largeur, vous pouvez obtenir la position des coordonnées de twitterLogo. Autrement dit, la valeur des coordonnées de twitterLogo est.twitterLogo{background-position:-62px 0;width:30px;}

Après avoir lu ceci, vous avez découvert un motif, c'est-à-dire chaque Les coordonnées d'un élément adjacent sont égales à la valeur des coordonnées de l'élément précédent plus la largeur de l'élément précédent. C'est-à-dire que la valeur de coordonnée horizontale de l'élément est égale à. La valeur des coordonnées de l'élément adjacent plus sa largeur. Bon, parlons de la deuxième option.

2. Coordonnées de positionnement vertical

Les coordonnées de positionnement longitudinales signifient que la coordonnée de l'axe X est fixe et que la valeur de la coordonnée de l'axe Y est modifiée pour changer l'arrière-plan. leur coordonnée sur l'axe X C'est toujours la même, 0 ou gauche. Permettez-moi de partager un cas ci-dessous

Code CSS :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul{margin:0;padding:0;float:left;width:32px;}
ul li{float:left;list-style-type:none;width:32px;background-image:url(image/bg.jpg);background-repeat:none;margin:10px 0;}
.f{background-position:0 0;height:32px;}
.p{background-position:0 -32px;height:20px}/*Y轴坐标等于起始位置的高度 即：-（0+32）*/
.fr{background-position:0 -52px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度,即：-（32+20） */
.h{background-position:0 -84px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度*即：-（52+32）*/
.t{background-position:0 -116px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度，即：-（84+32）*/
</style>
</head>
                                                                                           
<body>
<ul>                                                                                           
<li class="f"></li>
<li class="p"></li>
<li class="fr"></li>
<li class="h"></li>
<li class="t"></li>
</ul>
</body>
</html>

3 Lorsque la largeur et la hauteur sont égales, c'est le mieux. Faites la multiplication directement. Je crois en vos capacités mathématiques. .J'ai réussi la troisième année de l'école primaire, OK, laisse-moi le partager.

1. Lorsque la largeur et la hauteur veulent être égales, les coordonnées de l'axe X sont égales. Cette situation se produit généralement sous un groupe de boutons, et l'arrière-plan change lorsque la souris glisse et clique. J'ai également résumé cette situation. Il existe une formule :

Coordonnée de l'axe X =-n (position de départ + largeur).

où la valeur n commence à 0. Autrement dit, les coordonnées de toutes les positions de départ sont 0, à partir de 0. Ce qui suit est analogue.

Par exemple, l'élément que vous souhaitez positionner maintenant est le troisième. Supposons que la largeur de notre icône ici soit de 30 pixels. Ensuite, sa coordonnée sur l'axe X est égale à . x=-3*(0+30px);

Coordonnée de l'axe Y =-n (position de départ + hauteur)

Par exemple, l'icône que vous souhaitez positionner maintenant est la 6ème position , Supposons que la hauteur ici soit également de 32px ; alors sa coordonnée sur l'axe Y est

Y=-6 (0+32px) =-192px Haha, bien sûr, il existe de nombreux outils, l'outil appelé gaga est. plutôt bien, mais je ne l'ai jamais utilisé. J'ai toujours utilisé mon propre set. Je le trouve très pratique en pratique, j'aimerais donc le partager.

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!