Technologie d'assemblage d'images CSS


Assemblage d'images

L'assemblage d'images est une collection d'images uniques.

Les pages Web contenant de nombreuses images peuvent prendre beaucoup de temps à charger et générer des requêtes vers plusieurs serveurs.

L'utilisation de l'assemblage d'images réduira le nombre de requêtes du serveur et économisera de la bande passante.

Assemblage d'images - exemple simple

Au lieu d'utiliser trois images distinctes, utilisons une seule image comme celle-ci :

img_navsprites.gif

Avec CSS, nous pouvons afficher uniquement la partie de l'image dont nous avons besoin.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>  
<style>
.home {
    width: 46px;
    height: 44px;
    background: url("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif") 0 0;
}

.next {
    width: 43px;
    height: 44px;
    background: url("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif") -91px 0;
}
</style>
</head>
<body>

<p class="home"></p><br><br>
<p class="next"></p>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Exemple d'analyse :

  • largeur : 46px ; hauteur : 44px ; -- définir la partie de l'image que nous utilisons

    <🎜 ; >
  • background: url("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif")

    0 0 - Définir l'image d'arrière-plan et son position (gauche 0px, haut 0px)

C'est le moyen le plus simple d'utiliser l'assemblage d'images, nous utilisons maintenant des liens et des effets de survol.

Assemblage d'images - Créer une liste de navigation

Nous souhaitons utiliser des images assemblées ("https://img.php.cn/upload/image/903/855/589/ 1550121182683639 .gif") pour créer une liste de navigation.

Nous utiliserons une liste HTML car elle peut être liée et prend également en charge les images d'arrière-plan :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>  
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif') -91px 0;}
</style>
</head>

<body>
<ul id="navlist">
  <li id="home"><a href="/"></a></li>
  <li id="prev"><a href="/css/"></a></li>
  <li id="next"><a href="/css/"></a></li>
</ul>
</body>
</html>

Exécuter Instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Exemple d'analyse :

  • #navlist{position:relative;} - Définir le positionnement relatif pour obtenir le positionnement absolu à l'intérieur de

  • #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - la marge et le remplissage sont définis sur 0, le style de liste est supprimé et tous les éléments de la liste sont un positionnement absolu

  • #navlist li, #navlist a{height:44px;display:block;} - la hauteur de toutes les images est de 44px

Maintenant, commencez à positionner et à styliser chaque section spécifique :

  • #home{left:0px;width:46px;} - positionné à l'extrême gauche et la largeur de l'image est de 46px

  • #home{background:url("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif
    ") 0 0 ;} - Définir l'image de fond et sa position (0px à gauche, 0px en haut)

  • #prev{left:63px;width:43px;} - Position à droite 63px (#home width 46px + élément un espace supplémentaire entre), d'une largeur de 43px.

  • #prev{background:url('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif
    ') -47px 0;} - Définir l'image d'arrière-plan 47px à droite (#home width 46px + 1px de diviseur)

  • #next{left:129px;width:43px;} - Positionner à droite 129px( # prev 63px + #prev la largeur est de 43px + espace restant), la largeur est de 43px.

  • #next{background:url('https://img.php.cn/upload/ image/903/855/589/1550121182683639.gif
    ') no-repeat -91px 0;} - Définit 91px sur le côté droit de l'image d'arrière-plan (#home 46px+1px ligne de séparation + #prev large 43px+1px ligne de séparation)

Épissures d'images - Effet de survol

Nous souhaitons maintenant ajouter un effet de survol à notre liste de navigation.

lamp.gif
lamp.gif:hover 选择器用于鼠标悬停在元素上的显示的效果

提示： :hover 选择器可以运用于所有元素。
 : survolez la sélection Le sélecteur permet d'afficher l'effet lorsque la souris survole l'élément <🎜><🎜><🎜><🎜><🎜><🎜>Astuce : <🎜> Le sélecteur :hover peut être appliqué à tous les éléments.

Notre nouvelle image ("https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif") contient trois images de navigation et trois images :

Comme il s'agit d'une seule image plutôt que de 6 fichiers image distincts, il n'y aura pas de chargement paresseux lorsque l'utilisateur survolera l'image.

Nous ajoutons seulement trois lignes de code pour ajouter l'effet de survol :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>  
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif') 0 0;}
#home a:hover{background: url('https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif') 0 -45px;}

#prev{left:63px;width:43px;}
#prev{background:url('https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif') -47px 0;}
#prev a:hover{background: url('https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif') -47px -45px;}

#next{left:129px;width:43px;}
#next{background:url('https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif') -91px 0;}
#next a:hover{background: url('https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif') -91px -45px;}
</style>
</head>

<body>
<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Analyse de l'instance :

  • Depuis l'élément de liste contient un lien, nous Vous pouvez utiliser : survoler la pseudo-classe

  • #home a:hover{background: transparent url("https://img.php.cn/upload/course /000/000/015/ 5c64fdaa5b0ba752.gif
    ") 0 -45px;} - Pour les trois images de survol, nous spécifions la même position d'arrière-plan, juste 45px plus bas chacune

←
→