Comment utiliser les sprites en CSS ? Introduction à l'attribut background (exemple de code)-tutoriel CSS-php.cn

Comment utiliser les sprites en CSS ? Introduction à l'attribut background (exemple de code)

青灯夜游

Libérer： 2018-09-14 15:55:46

original

16350 Les gens l'ont consulté

Ce chapitre va vous présenter comment utiliser les sprites en CSS ? Introduction à l'attribut background (exemple de code), afin que chacun puisse comprendre comment utiliser les images sprite css (images sprite). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Comment utiliser les sprites en CSS ?

Introduction à l'utilisation des sprites Avant de les utiliser, il faut d'abord savoir ce que sont les sprites. . Ce n’est que lorsque nous saurons pour la première fois ce que sont les sprites et comprendrons leurs principes que nous pourrons parler de leur utilisation.

1. Qu'est-ce qu'un sprite CSS ?

sprite css (sprite) est littéralement traduit par "sprite CSS", également connu sous le nom de "sprite d'image CSS", "positionnement de carte CSS" ou "sprite d'image CSS", "sprite CSS", etc. . "Sprite image" est une méthode de traitement d'application d'image Web. En fait, il s'agit d'inclure toutes les images dispersées impliquées dans une page dans une seule grande image. De cette manière, lors de l'accès à la page, les images chargées ne s'afficheront pas lentement une par une comme auparavant.

2. Comment utiliser le sprite CSS (sprite)

le sprite CSS (sprite) consiste en fait à fusionner plusieurs images en une seule image, puis à disposer l'arrière-plan de pages Web grâce à la technologie de positionnement en arrière-plan CSS. Lorsque des images doivent être utilisées, l'étape actuelle consiste à utiliser l'attribut CSS background-image combiné avec background-repeat, background-position, etc. pour afficher l'image.

3. Implémentation du code :

Matériel de sprite utilisé : incn.png

Comment utiliser les sprites en CSS ? Introduction à lattribut background (exemple de code)

Code :

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>文子居中</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.sprites{
				width: 200px;
				margin: 50px auto;
			}
			
			.sprites div {
				margin: 5px;
			}
			
			.sprites span {
				float: left;
				width: 20px;
				height: 20px;
				background-image: url(Comment utiliser les sprites en CSS ? Introduction à lattribut background (exemple de code));//引用精灵图（sprite）：incn.png
				background-size: 60px 40px;
			}
			
			.sprites1 {
				background-position: 0 0;
			}
			
			.sprites2 {
				background-position: -20px 0;
			}
			
			.sprites3 {
				background-position: 0 -20px;
			}
			
			.sprites4 {
				background-position: -20px -20px;
			}
			
			.sprites5 {
				background-position: -40px 0;
			}
			
			.sprites6 {
				background-position: -40px -20px;
			}
		</style>
	</head>

	<body>
		<div class="sprites">
			<div><span class="sprites1"></span>付款图标</div>
			<div><span class="sprites2"></span>存款图标</div>
			<div><span class="sprites3"></span>删除图标</div>
			<div><span class="sprites4"></span>粘贴图标</div>
			<div><span class="sprites5"></span>笑脸图标</div>
			<div><span class="sprites6"></span>编辑图标</div>
		</div>
	</body>

</html>

Copier après la connexion

Rendu :

Comment utiliser les sprites en CSS ? Introduction à lattribut background (exemple de code)

Code principal utilisé :

image d'arrière-plan : url(icno. png);---Définir l'arrière-plan image pour l'élément span dans les sprites, faisant référence à l'image du sprite (incn.png)

background-size: 60px 40px; ---Ajustez la taille de l'image d'arrière-plan, de sorte que l'arrière-plan soit l'image de l'élément span de la boîte des sprites est fixée à la largeur (60px) et à la hauteur (40px)

attribut background-position --- Il s'agit du code le plus critique, le positionnement de l'image. Définit ou récupère la position de l'image d'arrière-plan de l'élément span de la boîte de sprites. L'attribut background-image doit être spécifié avant de pouvoir être utilisé.

Explication : La position d'arrière-plan a deux valeurs. La première représente la valeur de distance vers la gauche (peut être positive ou négative), et la deuxième valeur représente la valeur de distance vers le haut (peut être positive). ou négatif). Lorsqu'il s'agit d'un nombre positif, il représente la distance vers la gauche et au-dessus lorsque l'image de fond est utilisée comme image de fond de la boîte d'objet. Lorsqu'il s'agit d'un nombre négatif, il représente l'image de fond comme image de fond de la boîte. Faites glisser l'image d'arrière-plan au-delà du côté gauche de l'objet boîte. À quelle distance se trouve le haut de l'objet boîte pour commencer à afficher cette image d'arrière-plan.

2. Introduction aux autres valeurs d'attributde l'attribut d'arrière-plan CSS

En plus de l'image d'arrière-plan ci-dessus, background -size, background-position, l'attribut background En plus des valeurs d'attribut, il existe d'autres valeurs d'attribut, telles que :

1 background-color : Définit la couleur d'arrière-plan de l'élément. l’arrière-plan est défini.

body {background-color:#b0c4de;}

Copier après la connexion

Rendu :

Comment utiliser les sprites en CSS ? Introduction à lattribut background (exemple de code)

body {background-color:#b0c4de;}Définissez la couleur d'arrière-plan de la page entière sur : # b0c4de

En CSS, les valeurs de couleur peuvent généralement être définies des manières suivantes :

Hex - telles que : "#ff0000" ;

RGB - tel que : "rgb(255,0,0)" ;

Nom de la couleur - tel que : "rouge".

2. background-repeat : définit la méthode de mosaïque de l'image d'arrière-plan (horizontalement ou verticalement, pas de mosaïque).

Syntaxe :

background-repeat：repeat-x || repeat-y || no-repeat ;

Copier après la connexion

répétition-x : carrelage horizontal ;

répétition-y : carrelage vertical

pas de répétition : magasin inégal.

3. background-attachment : définissez si l'image d'arrière-plan est fixe ou défile avec le reste de la page.

Syntaxe :

background-repeat：scroll || fixed || inherit；

Copier après la connexion

scroll : attribut par défaut, définissez l'image d'arrière-plan pour qu'elle défile avec le reste de la page

fixe : définissez l'image d'arrière-plan ; à corriger ;

inherit : Spécifie que les paramètres de background-attachment doivent être hérités de l'élément parent

;

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!