So erfassen Sie kleine Symbole aus PNG mit CSS

Css-Methode zum Abfangen kleiner Symbole aus PNG: Verwenden Sie zuerst das Hintergrundattribut, um das PNG-Bild einzuführen, verwenden Sie den Attributwert „No-Repeat“, um das Bild so festzulegen, dass es sich nicht wiederholt. Verwenden Sie dann das Attribut „Hintergrundposition“, um den Anfangspunkt festzulegen Position des Bildes für eine präzise Positionierung.

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

CSS-Datei

.icon
{
    background: url(icon.png) no-repeat; /*url为png图片的路径*/
    /*width和line-height分别对应每个小图标的宽和高*/
    width: 20px;    
    line-height: :20px;
    display: inline-block;
}
.icon-small
{   /*png图片左上角为原点,往右往下均为负值*/
    background-position: -150px 0px;/*对应小图标的坐标*/
}

HTML-Datei

<!-- 联想一下Bootstrap 字体图标(Glyphicons) 
    <span class="glyphicon glyphicon-search"></span>
-->
<div class="icon icon-small"></div>

Warum sind die Hintergrundbilder einer Seite oder mehrerer Seiten in einem Bild integriert?

Wenn wir die Website besuchen, stellen wir eine HTTP-Anfrage an den Server Neben vielen Faktoren wie Öffnungsgeschwindigkeit, Verarbeitungsgeschwindigkeit, Seitengröße, Bildgröße, Netzwerkgeschwindigkeit usw. ist ein weiterer wichtiger Faktor die Anzahl der HTTP-Anfragen. Je mehr HTTP-Anfragen vorhanden sind, desto langsamer wird die Website geöffnet. Wenn eine HTTP-Anfrage an den Server gestellt wird, beträgt die Verzögerung, die durch die Seitenöffnungsgeschwindigkeit verursacht wird, etwa 0,01 Sekunden. Eine Verbindung oder ein Bild stellt eine Anfrage an den Server. Wenn HTTP Zu viele Anfragen verursachen viele Verzögerungen auf der Seite und die Zugriffsgeschwindigkeit ist natürlich langsam.

Wenn alle Hintergrundbilder in einem Bild integriert sind, wird nur eine HTTP-Anfrage an den Server gesendet, die Anzahl der Anfragen wird stark reduziert und die Verzögerung ist gering. Verwenden Sie dann die Eigenschaften „Hintergrundbild“ und „Hintergrundposition“ von CSS, um das erforderliche Hintergrundbild zu realisieren und es so zu positionieren, dass der gewünschte Ausdruckseffekt der Seite erzielt wird.

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo erfassen Sie kleine Symbole aus PNG mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!