Wie verwende ich Sprites in CSS? Einführung in Hintergrundattribute (Codebeispiel)-CSS-Tutorial-php.cn

Wie verwende ich Sprites in CSS? Einführung in Hintergrundattribute (Codebeispiel)

青灯夜游

Freigeben： 2018-09-14 15:55:46

Original

16384 Leute haben es durchsucht

In diesem Kapitel erfahren Sie, wie Sie Sprites in CSS verwenden. Einführung in das Hintergrundattribut (Codebeispiel), damit jeder verstehen kann, wie man CSS-Sprite-Bilder (Sprite-Bilder) verwendet. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Wie verwende ich Sprites in CSS?

Einführung in die Verwendung von Sprites Bevor wir sie verwenden, müssen wir zunächst wissen, was Sprites sind . Erst wenn wir wissen, was Sprites sind und die Prinzipien von Sprites verstehen, können wir über die Verwendung von Sprites sprechen.

1. Was ist ein CSS-Sprite?

CSS-Sprite (Sprite) wird wörtlich als „CSS-Sprite“ übersetzt, auch bekannt als „CSS-Bild-Sprite“, „CSS-Kartenpositionierung“ oder „CSS-Bild-Sprite“, „CSS-Sprite“ usw „Sprite Image“ ist eine Web-Bildanwendungsverarbeitungsmethode. Tatsächlich werden alle verstreuten Bilder einer Seite in einem großen Bild zusammengefasst. Auf diese Weise werden die geladenen Bilder beim Zugriff auf die Seite nicht wie zuvor langsam angezeigt.

2. So verwenden Sie CSS-Sprite (Sprite)

CSS-Sprite (Sprite) dient eigentlich dazu, mehrere Bilder zu einem Bild zusammenzuführen und dann den Hintergrund zu gestalten Webseiten durch CSS-Hintergrundpositionierungstechnologie. Wenn Bilder verwendet werden müssen, besteht der aktuelle Schritt darin, das CSS-Attribut „Hintergrundbild“ in Kombination mit „Hintergrundwiederholung“, „Hintergrundposition“ usw. zu verwenden, um das Bild anzuzeigen.

3. Code-Implementierung:

Verwendetes Sprite-Material: incn.png

Wie verwende ich Sprites in CSS? Einführung in Hintergrundattribute (Codebeispiel)

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(Wie verwende ich Sprites in CSS? Einführung in Hintergrundattribute (Codebeispiel));//引用精灵图（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>

Nach dem Login kopieren

Rendering:

Wie verwende ich Sprites in CSS? Einführung in Hintergrundattribute (Codebeispiel)

Verwendeter Kerncode:

Hintergrundbild: url(Wie verwende ich Sprites in CSS? Einführung in Hintergrundattribute (Codebeispiel)) ;---Legen Sie das Hintergrundbild fest für das Span-Element in Sprites, das auf das Sprite-Bild verweist (incn.png);

background-size: 60px 40px; Passen Sie die Größe des Hintergrundbilds an. Erstellen Sie das Hintergrundbild des Spans Element der Sprites-Box auf Breite (60 Pixel) und Höhe (40 Pixel) festgelegt;

Hintergrundpositionsattribut --- Dies ist der kritischste Code, die Bildpositionierung. Legt die Hintergrundbildposition des Span-Elements der Sprites-Box fest oder ruft sie ab. Das Attribut „Hintergrundbild“ muss angegeben werden, bevor es verwendet werden kann.

Erklärung: Die Hintergrundposition hat zwei Werte. Der erste Wert stellt den Abstandswert nach links dar (kann positiv oder negativ sein), und der zweite Wert stellt den Abstandswert nach oben dar (kann positiv sein). oder negativ). Wenn es sich um eine positive Zahl handelt, stellt sie den Abstand nach links und oben dar, wenn das Hintergrundbild als Hintergrundbild des Objektfelds verwendet wird. Wenn es sich um eine negative Zahl handelt, stellt sie das Hintergrundbild als Hintergrundbild des Felds dar Ziehen Sie das Hintergrundbild über die linke Seite des Boxobjekts hinaus.

2. Einführung in andere Attributwerte des CSS-Hintergrundattributs

Zusätzlich zum obigen Hintergrundbild, Hintergrund -size, Hintergrundposition, das Hintergrundattribut Zusätzlich zu den Attributwerten gibt es andere Attributwerte, wie zum Beispiel:

1. Definiert die Hintergrundfarbe des Elements Hintergrund ist definiert.

body {background-color:#b0c4de;}

Nach dem Login kopieren

Rendering:

Wie verwende ich Sprites in CSS? Einführung in Hintergrundattribute (Codebeispiel)

body {background-color:#b0c4de;} Setzen Sie die Hintergrundfarbe der gesamten Seite auf: #b0c4de

In CSS können Farbwerte normalerweise auf folgende Weise definiert werden:

Hex – wie zum Beispiel: „#ff0000“;

RGB – wie zum Beispiel : "rgb (255,0,0)";

Farbname – zum Beispiel: „rot“.

2. Hintergrundwiederholung: Definiert die Kachelmethode des Hintergrundbilds (horizontal oder vertikal, nicht kacheln).

Syntax:

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

Nach dem Login kopieren

repeat-x: horizontale Kachelung;

repeat-y: vertikale Kachelung;

no-repeat: keine Kachelung.

3. Hintergrundanhang: Legen Sie fest, ob das Hintergrundbild fest ist oder mit dem Rest der Seite scrollt.

Syntax:

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

Nach dem Login kopieren

scrollen: Standardattribut, legen Sie fest, dass das Hintergrundbild mit dem Rest der Seite scrollt;

behoben: Legen Sie fest, dass das Hintergrundbild so ist behoben;

inherit: Gibt an, dass die Einstellungen des Hintergrundanhangs vom übergeordneten Element geerbt werden sollen;

Das obige ist der detaillierte Inhalt vonWie verwende ich Sprites in CSS? Einführung in Hintergrundattribute (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!