So positionieren Sie eine CSS-Sprite-Map

Die Sprite-Map verwendet die Kombination aus Hintergrundbild, Hintergrundwiederholung und Hintergrundposition, um den Hintergrund zu positionieren. Das Attribut „Hintergrundposition“ kann Zahlen verwenden, um das Hintergrundbild in der Objektposition des Layoutfelds genau zu lokalisieren.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS-Sprite-Map dient eigentlich dazu, mehrere Bilder zu einem Bild zusammenzuführen und dann den Hintergrund der Webseite mithilfe der CSS-Hintergrundpositionierungstechnologie zu gestalten.

Die Vorteile liegen auf der Hand, denn wenn viele Bilder vorhanden sind, erhöht sich die Anzahl der HTTP-Anfragen, was zweifellos die Leistung der Website verringert, insbesondere bei Websites mit vielen Bildern, wenn Sie CSS-Sprites verwenden können, um sie zu reduzieren Je mehr Bilder es gibt, desto schneller wird es.

Hintergrund für die Sprite-Bildgenerierung:

1 Jedes Bild auf der Webseite muss eine Anfrage an den Server senden, bevor es dem Benutzer angezeigt werden kann.

2. Wenn die Webseite zu viele Bilder enthält, akzeptiert und sendet der Server häufig Anfragen, wodurch die Ladegeschwindigkeit der Seite erheblich verringert wird. Um die Anzahl der Anfragen, die der Server annimmt und sendet, effektiv zu reduzieren und die Ladegeschwindigkeit der Seite zu verbessern, wurde die Sprite-Map-Definition eingeführt:

1 Der Hintergrund ist so positioniert, dass das Symbol in jedem Feld erscheint.

2. Die Hintergrundpositionierungsmethode besteht hauptsächlich aus der Steuerung der Werte der x- und y-Achse.

Verwenden Sie die Kombination aus „Hintergrundbild“, „Hintergrundwiederholung“ und „Hintergrundposition“, um den Hintergrund mithilfe von Zahlen in der Objektposition des Layoutfelds genau zu lokalisieren.

Tipps für die Verwendung von Sprite-Diagrammen:

1. Allgemeine Situation: Verwenden Sie einfach eine Box und das Hintergrundbild darin ist ein Sprite-Diagramm, wenn Sie es verwenden.

2. Sonderfall: In der Box befindet sich ein kleines Symbol. Zu diesem Zeitpunkt wird die Positionierung des kleinen Symbols automatisch in einen Inline-Block umgewandelt ) werden Breite und Höhe des kleinen Bildes im Sprite-Diagramm definiert und dann auf die Werte der x-Achse und der y-Achse geachtet. Beispiel: Sprites

<ul class="Sprites"> 
    <li><span class="a1"></span><a href="#">WORD文章标题</a></li> 
    <li><span class="a2"></span><a href="#">PPT内容标题</a></li> 
    <li><span class="a3"></span><a href="#">Excel内容标题</a></li> 
    <li><span class="a4"></span><a href="#">PDF内容标题</a></li> 
    <li><span class="a5"></span><a href="#">文本文档标题</a></li> 
</ul>

Erste Einführung in den Hintergrund von ul.Sprites li span

ul.Sprites li span{ background-image: url(ico.png);background-repeat:no-repeat;} Legen Sie das CSS-Hintergrundbild für span fest.

Dann legen Sie die spezifischen Werte für die Positionierung des Symbolhintergrunds jeweils für verschiedene Span-Klassen fest

• ul.Sprites li span.a1{ Hintergrund -position: -62px -32pxLegen Sie das Hintergrundbild als Hintergrund des entsprechenden Boxobjekts fest und „ziehen“ Sie 62 Pixel nach links und „ziehen“ Sie 32 Pixel nach oben, um mit der Anzeige dieses Hintergrundsymbols zu beginnen

• ul.Sprites li span.a2{ background-position: -86px -32pxLegen Sie das Hintergrundbild als Hintergrund des entsprechenden Box-Objekts fest und „ziehen“ Sie 86 Pixel nach links und „ziehen“ Sie 32 Pixel nach oben um mit der Anzeige dieses Hintergrundsymbols zu beginnen

• ul.Sprites li span.a3{ background-position: -110px -32px} Legen Sie das Hintergrundbild als Hintergrund des entsprechenden Boxobjekts fest und dann „Ziehen“ Sie 110 Pixel nach links und 32 Pixel nach oben, um mit der Anzeige dieses Hintergrundsymbols zu beginnen als Hintergrund des entsprechenden Boxobjekts und „ziehen“ Sie 133 Pixel nach links, um mit der Anzeige dieses Hintergrundsymbols zu beginnen

• ul.Sprites li span.a5{ Hintergrundposition: - 158px -32px Nachdem Sie das Hintergrundbild als Hintergrund des entsprechenden Boxobjekts festgelegt haben, „ziehen“ Sie 158px nach links und „ziehen“ Sie 32px nach oben, um mit der Anzeige dieses Hintergrundsymbols zu beginnen

  Taste:

  Hintergrund- Position hat zwei Werte, der erste stellt den linken Abstandswert dar (kann positiv oder negativ sein), der zweite Wert stellt den oberen Abstandswert dar (kann positiv oder negativ sein)

  Hintergrundposition hat zwei Werte, die positiv sein können oder Wenn es eine positive Zahl ist, stellt es das Hintergrundbild als Objektbox-Hintergrundbild dar. Wenn es sich links befindet und wie weit es vom Boxobjekt entfernt ist, wird das Hintergrundbild angezeigt , bedeutet dies, dass das Hintergrundbild als Hintergrundbild des Boxobjekts verwendet wird, bis es über die linke Seite des Boxobjekts hinausgeht und so weit über den oberen Rand des Boxobjekts Objekt, um mit der Anzeige des Hintergrundbilds zu beginnen.

  (Teilen von Lernvideos: ul.Sprites li span{ background-image: url(ico.png);background-repeat:no-repeat;} 给span设置css背景图片。

  再分别对不同span class设置对于图标背景定位具体值

  • ul.Sprites li span.a1{ background-position: -62px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”62px，向上“拖动”32px开始显示此背景图标

  • ul.Sprites li span.a2{ background-position: -86px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”86px，向上“拖动”32px开始显示此背景图标

  • ul.Sprites li span.a3{ background-position: -110px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”110px，向上“拖动”32px开始显示此背景图标

  • ul.Sprites li span.a4{ background-position: -133px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”133px，向上“拖动”32px开始显示此背景图标

  • ul.Sprites li span.a5{ background-position: -158px -32px}CSS-Video-Tutorial

    )

Das obige ist der detaillierte Inhalt vonSo positionieren Sie eine CSS-Sprite-Map. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!