Maison > Article > interface Web > À propos de la technologie d'assemblage d'images CSS

À propos de la technologie d'assemblage d'images CSS

不言original: 2018-06-12 15:05:571429parcourir

Cet article présente principalement la technologie d'assemblage d'images CSS, qui a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

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 la bande passante.

Assemblage d'images – créer une liste de navigation

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			#navlist {position:relative;}
			
			#navlist li{
				margin:0px;
				padding:0px;
				list-style:none;
				position:absolute;
				top:0px;
			}
			
			#navlist li, #navlist a{
				height:44px;
				display:block;
			}
			
			#home {
				left:0px;
				width:46px;
				background:url(&#39;./images/img_navsprites.gif&#39;)0 0;
			}
			
			#prev {
				left:63px;
				width:43px;
				background:url(&#39;./images/img_navsprites.gif&#39;)-47px 0;
			}
			
			#next {
				left:129px;
				width:43px;
				background:url(&#39;./images/img_navsprites.gif&#39;)-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>

Exemple d'analyse :

#navlist{position:relative;} - La position définit le positionnement relatif, de sorte que 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 positionnés de manière absolue
#navlist li, #navlist a{height:44px;display:block;} - La hauteur de toutes les images est de 44px

Commencez maintenant à positionner et à styliser chaque partie spécifique :

#home{left:0px;width:46px;} - Positionné à l'extrême gauche et la largeur de l'image est de 46px
#home{background: url(img_navsprites.gif) 0 0;} - Définir l'image d'arrière-plan et sa position (gauche 0px, haut 0px)
#prev{left:63px;width :43px;} - Le côté droit est positionné à 63px (#home fait 46px de large + un espace supplémentaire entre les éléments) et la largeur est de 43px.
#prev{background:url('img_navsprites.gif') -47px 0;} - Définir l'image d'arrière-plan 47px à droite (#home largeur 46px + 1px de séparateur)
#next{left:129px;width:43px;}- La position de droite est de 129px (#prev 63px + #prev la largeur est de 43px + espace restant), la largeur est de 43px.
#next{background:url('img_navsprites.gif') no-repeat -91px 0;} - Définissez 91px sur le côté droit de l'image d'arrière-plan (#home 46px+1px ligne de séparation + #prev largeur 43px+1px Ligne de séparation)

Assemblage d'image - effet de survol

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			#navlist {position:relative;}
			
			#navlist li{
				margin:0px;
				padding:0px;
				list-style:none;
				position:absolute;
				top:0px;
			}
			
			#navlist li, #navlist a{
				height:44px;
				display:block;
			}
			
			#home {
				left:0px;
				width:46px;
				background:url(&#39;./images/img_navsprites_hover.gif&#39;)0 0;
			}
			
			#home a:hover {
				background:url(&#39;./images/img_navsprites_hover.gif&#39;)0 -45px;
			}
			
			#prev {
				left:63px;
				width:43px;
				background:url(&#39;./images/img_navsprites_hover.gif&#39;)-47px 0;
			}
			
			#prev a:hover {
				background:url(&#39;./images/img_navsprites_hover.gif&#39;)-47px -45px;
			}
			
			#next {
				left:129px;
				width:43px;
				background:url(&#39;./images/img_navsprites_hover.gif&#39;)-91px 0;
			}
			
			#next a:hover {
				background:url(&#39;./images/img_navsprites_hover.gif&#39;)-91px -45px;
			}
			
		</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>

Exemple d'analyse :

Puisque l'élément de liste contient un lien, nous pouvons utiliser : survoler une pseudo-classe
#home a:hover{background: transparent url(img_navsprites_hover.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

C'est Pour cet article, l'intégralité du contenu, j'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utilisez CSS pour obtenir diverses méthodes de centrage

Utilisez CSS pour obtenir des effets d'ombre

À propos des problèmes de sélecteur CSS

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Questions sur les sélecteurs CSSArticle suivant：Questions sur les sélecteurs CSS

Articles Liés

Voir plus