CSS-Sprites (CSS-Sprite)

1. Was sind CSS-Sprites?

Allgemeines CSS-Sprite ist eine Methode zur Verarbeitung von Web-Bildern. Es ermöglicht Ihnen, alle verstreuten Bilder einer Seite in einem großen Bild zusammenzufassen, sodass beim Zugriff auf die Seite nicht wie zuvor die geladenen Bilder einzeln angezeigt werden. Verwenden Sie dann die CSS-Kombination „background-image“, „background-repeat“ und „background-position“, um den Hintergrund zu positionieren.

2. Vor- und Nachteile der Verwendung von CSS Sprites

Vorteile:

1. Reduzieren Sie die HTTP-Anfragen von Webseiten und verbessern Sie dadurch die Leistung der Seite erheblich.

2. Reduzieren Sie die Bytes des Bildes. Die Bytes beim Zusammenführen mehrerer Bilder zu einem Bild sind immer kleiner als die Summe der Bytes mehrerer Bilder.

3. Lösen Sie das Problem der Benennung von Bildern.

Nachteile:

1. Beim Zusammenführen von Bildern sollten mehrere Bilder auf geordnete und sinnvolle Weise zu einem Bild zusammengeführt werden, und es sollte genügend Platz gelassen werden, um unnötige Hintergründe im Abschnitt zu vermeiden;

2. Wenn das Bild auf adaptiven Seiten unter Breitbild- und hochauflösenden Bildschirmen nicht breit genug ist, kann es leicht passieren, dass der Hintergrund kaputt geht

3. Bei der Entwicklung von CSS-Sprites ist es notwendig, die genaue Position jeder Hintergrundeinheit zu messen und zu berechnen. Es wird empfohlen, das CSS-Sprites-Stilgenerierungstool zu verwenden.

4. Wenn sich der Seitenhintergrund während der CSS-Sprites-Wartung geringfügig ändert, muss dieses zusammengeführte Bild normalerweise geändert werden.

Zusammenfassung: Im Allgemeinen wird das CSS-Sprites-Layout für das lokale kleine Box-Layout verwendet und ist nicht für große Hintergründe und große Layout-Hintergründe geeignet. Zum Beispiel ein kleines Teillayout, ein kleiner Symbolhintergrund, ein kleiner Navigationshintergrund und andere CSS-Layouts. Kurz gesagt: Oft müssen wir die Vor- und Nachteile abwägen, bevor wir uns für die Verwendung von CSS-Sprites entscheiden.

3. Gib mir eine Kastanie

Ein Bild von Emoji

                                                                     

Endeffekt:

HTML-Code:

CSS-Code:

    <ul>
        <li class="Emoji1"></li>
        <li class="Emoji2"></li>
        <li class="Emoji3"></li>
        <li class="Emoji4"></li>
    </ul>

　

*{
        margin: 0px;
    }
    ul,li{
        list-style: none;
    }
    li{
        width:50px;
        height:50px;
        overflow: hidden;
        background: url('Emoji.jpg') -0px -0px no-repeat;
    }
     .Emoji1{
        background-position: -0px -0px;
    }
    .Emoji2{
        background-position: -0px -50px;
    }
    .Emoji3{
        background-position: -0px -100px;
    }
    .Emoji4{
        background-position: -0px -150px;
    }