Wozu dient die CSS-Sprite-Technologie?-CSS-Tutorial-php.cn

Wozu dient die CSS-Sprite-Technologie?

青灯夜游

Freigeben： 2020-11-17 18:20:16

Original

3532 Leute haben es durchsucht

Die CSS-Sprite-Technologie führt viele kleine Bilder zu einem größeren Bild zusammen. Wenn die Seite zum ersten Mal geladen wird, müssen nicht zu viele kleine Bilder geladen werden, sondern nur das, das die kleinen Bilder zusammenführt Vergrößern Sie das Bild, wodurch die Ladegeschwindigkeit der Seite bis zu einem gewissen Grad verbessert, der Druck auf den Server verringert und der Serververkehr eingespart werden kann.

Wozu dient die CSS-Sprite-Technologie?

Empfohlenes Tutorial: CSS-Video-Tutorial

Was ist CSS-Sprite-Technologie (Sprite)?

CSS-Sprite-Technologie (Sprite) bedeutet wörtlich übersetzt „CSS-Sprite“, auch bekannt als „CSS-Bildspleißung“, „CSS-Kartenpositionierung“ oder „CSS-Bild-Sprite“, „CSS-Sprite“, was normalerweise als Web interpretiert wird verfahren zur verarbeitung von bildanwendungen.

Tatsächlich werden alle verstreuten Bilder einer Seite in einem großen Bild zusammengefasst. Auf diese Weise werden die geladenen Bilder nicht wie zuvor langsam nacheinander angezeigt.

Grund für die Sprite-Technologie:

Viele große Webseiten müssen beim ersten Laden viele kleine Bilder laden, um dieses Problem zu lösen. Da der Server gleichzeitig überlastet ist, haben wir Sprites eingeführt sind eine Technologie, die das Problem langer Ladezeiten, die das Benutzererlebnis beeinträchtigen, lindert.

Die Rolle der CSS-Sprite-Technologie

Das sogenannte Sprite besteht darin, viele kleine Bilder zu einem größeren Bild zusammenzuführen, sodass beim ersten Laden der Seite nicht zu viele kleine Bilder geladen werden müssen. Laden Sie einfach das große Bild, das die kleinen Bilder kombiniert, das Sprite. Dies verringert die Ladegeschwindigkeit der Seite bis zu einem gewissen Grad und entlastet den Server bis zu einem gewissen Grad.

1. Reduzieren Sie die Anzahl der Anfragen an den Server beim Laden von Webseitenbildern.

Sie können die meisten Hintergrundbilder und kleinen Symbole zur einfachen Verwendung an jedem Ort zusammenführen, sodass Anfragen von verschiedenen Orten nur ein Bild aufrufen müssen, wodurch die Zahl reduziert wird Reduzieren Sie die Serverbelastung, verbessern Sie die Seitenladegeschwindigkeit und sparen Sie Serververkehr.

2. Verbessern Sie die Ladegeschwindigkeit von Seiten

Einer der Vorteile der Sprite-Technologie ist die Ladezeit von Bildern (die Ladezeit eines einzelnen Bildes, wenn viele Sprites vorhanden sind). Ein aus den erforderlichen Bildern zusammengesetztes GIF ist deutlich kleiner als die Gesamtgröße aller Bilder.

Ein einzelnes GIF hat nur eine zugehörige Farbtabelle, während jedes separat aufgeteilte GIF seine eigene Farbtabelle hat, was die Gesamtgröße erhöht. Daher ist ein einzelnes JPEG- oder PNG-Sprite wahrscheinlich kleiner als die Gesamtgröße eines in mehrere Bilder aufgeteilten Bildes.

3. Reduzieren Sie einige Fehler, wenn die Maus darüber fährt. IE6 lädt das Hintergrundbild nicht aktiv vor, wenn Sie mit der Maus darüber fahren. Wenn mehrere Bilder verwendet werden, blinkt die Maus daher weiß . Bei Verwendung von CSS Sprite tritt dieses Phänomen nicht auf, da ein Bild ausreicht.

So verwenden Sie die CSS-Sprite-Technologie

CSS-Sprite (Sprite) besteht eigentlich darin, mehrere Bilder in einer Bilddatei zusammenzuführen und diese mithilfe der CSS-Hintergrund- und Hintergrundpositionseigenschaften zu rendern, was bedeutet, dass Ihre Tags komplexer geworden sind, Bilder sind in CSS definiert, nicht im Wozu dient die CSS-Sprite-Technologie?

Wenn Bilder verwendet werden müssen, wird das Bild zu diesem Zeitpunkt über das CSS-Attribut „Hintergrundbild“ in Kombination mit „Hintergrundwiederholung“, „Hintergrundposition“ usw. angezeigt.

Beispiel:

Wozu dient die CSS-Sprite-Technologie? Dies ist zum Beispiel ein großes Sprite-Bild, das wir jetzt verwenden, um die gewünschten Buchstaben zu buchstabieren, wie zum Beispiel ANDY

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            display: inline-block;
            background: url(images/abcd.jpg) no-repeat;
        }
        .aa{
            width: 108px;
            height: 110px;
            background-position: 0 -9px;
        }
        .nn{
            width: 112px;
            height: 110px;
            background-position: -255px -276px;
        }
        .dd{
            width: 97px;
            height: 107px;
            background-position: -363px -8px;
        }
        .yy{
            width: 110px;
            height: 110px;
            background-position: -367px -556px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

Nach dem Login kopieren

Der Endeffekt:

Wozu dient die CSS-Sprite-Technologie? Tatsächlich Um es ganz klar auszudrücken: Es geht darum, die gewünschten Buchstaben zu buchstabieren. Stellen Sie das Bild als großen Hintergrund ein und verschieben Sie dann das Hintergrundbild durch die Hintergrundposition, um den Teil anzuzeigen, den wir anzeigen möchten.

Obwohl das Sprite-Diagramm den Serverdruck und die Benutzererfahrungsprobleme gemildert hat, weist es immer noch einen großen Mangel auf, nämlich dass es den gesamten Körper betrifft. Die Hintergründe dieser Bilder werden von uns alle im Detail vermessen. Wenn wir die Seite ändern müssen, wird das eine sehr mühsame Aufgabe sein. . .

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonWozu dient die CSS-Sprite-Technologie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!