Heim > Artikel > Web-Frontend > Was ist CSS-Sprite?
Was ist CSS-Sprite?
- 青灯夜游Original
- 2021-05-12 16:44:442559Durchsuche
CSS-Sprites sind eine Möglichkeit, Hintergrundbilder auf Webseiten zu verarbeiten. Es fügt tatsächlich alle verstreuten Bilder einer Seite zu einem Gesamtbild zusammen und wendet das Gesamtbild dann auf die Webseite an. Wenn der Benutzer die Seite besucht, muss er lediglich eine Anfrage an den Dienst senden Das Hintergrundbild kann vollständig angezeigt werden.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Was ist ein CSS-Sprite?
„CSS-Sprite“, auch bekannt als „CSS-Bildspleißung“, „CSS-Texturpositionierung“ oder „CSS-Bild-Sprite“, „CSS-Sprite“, ist eine Methode zur Verarbeitung von Web-Bildern. Tatsächlich werden alle auf einer Seite verstreuten Bilder in einem großen Bild zusammengefasst. Auf diese Weise werden die geladenen Bilder nicht wie zuvor langsam nacheinander angezeigt.
Wenn der Benutzer die Seite besucht, muss er nur eine Anfrage an den Dienst senden und schon können alle Hintergrundbilder auf der Webseite angezeigt werden.
Zum Beispiel:
Vorteile
Die Verwendung von CSS Sprites kann die HTTP-Anfragen von Webseiten sehr gut reduzieren und dadurch die Leistung der Seite erheblich verbessern. Dies ist auch der größte Vorteil von CSS Sprites ist auch weit verbreitet und wird angewendet.
CSS-Sprites können die Bytes der Zusammenführung von 3 Bildern zu einem Bild reduzieren und die Bytes sind immer kleiner als die Gesamtbytes davon 3 Bilder.
löst das Problem von Webdesignern bei der Benennung von Bildern. Sie müssen nur eine Sammlung von Bildern benennen, wodurch die Effizienz der Webseitenproduktion verbessert wird.
Es ist einfach, den Stil zu ändern. Sie müssen nur die Farbe oder den Stil des Bildes auf einem oder mehreren Bildern ändern, und der Stil der gesamten Webseite kann geändert werden. Die Wartung ist bequemer.
Die Verwendung der Sprite-Technologie
css Sprite (Sprite) besteht eigentlich darin, mehrere Bilder zu einem Bild zusammenzuführen und dann den Hintergrund der Webseite mithilfe der CSS-Hintergrundpositionierungstechnologie zu gestalten. 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.
Beispiel:
Sprite-Analyse:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
}
.sprites{
width: 200px;
margin: 50px auto;
}
.sprites div{
margin: 5px;
}
.sprites span{
float: left;
width: 20px;
height:20px;
background: url('./images/icon.png');/* 引用精灵图 */
background-size: 60px 40px;
}
.sprites1{
background-position: 0 0;
}
.sprites2{
background-position: -20px 0 !important;
}
.sprites3{
background-position: 0 -20px !important;
}
.sprites4{
background-position: -20px -20px !important;
}
.sprites5{
background-position: -40px 0 !important;
}
</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>
</body>
</html>
Lernvideo-Sharing: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonWas ist CSS-Sprite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!