À propos de la technologie d'assemblage d'images CSS-tutoriel CSS-php.cn

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

不言

Libérer： 2018-06-12 15:05:57

original

1389 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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!