Heim > Artikel > Web-Frontend > Wie CSS Sprite die Bildstichtechnologie implementiert

Wie CSS Sprite die Bildstichtechnologie implementiert

不言Original: 2018-07-21 10:38:471675Durchsuche

In diesem Artikel erfahren Sie, wie Sie die Image-Stitching-Technologie mit CSS Sprite implementieren. Der Inhalt ist sehr gut. Ich hoffe, er kann allen helfen.

1. Sprite-Nutzungsszenarien:

2. Css Sprite (Vorteile)

Reduzieren Bildgröße.
Reduzieren Sie die HTTP-Anfragen der Webseite und verbessern Sie so die Leistung der Seite erheblich.
Es löst das Problem von Webdesignern bei der Benennung von Bildern. Sie müssen nur eine Sammlung von Bildern benennen, wodurch die Effizienz des Webs verbessert wird Seitenproduktion.
Es ist einfach, den Stil zu ändern. Sie müssen nur die Farbe oder den Stil eines oder einiger weniger Bilder ändern, und der Stil der gesamten Webseite kann geändert werden. Die Wartung ist bequemer.

3. Implementierungsprinzip

CSS-Hintergrundposition

Steuern, was eine Ebene anzeigen kann Die Größe des Bereichs,
das Hintergrundbild durch ein Fenster schieben
Beispiel:
Wie CSS Sprite die Bildstichtechnologie implementiert

Der Code lautet wie folgt:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>background-position<</title>
        <link rel="stylesheet" href="index.css"/>
    </head>
    <body>
        <span class="oo span1"></span>
        <span class="oo span2"></span>
        <span class="oo span3"></span>
        <span class="pp span4"></span>
        <span class="ll span5"></span> 
        <span class="hh span6"></span> 
        
    </body>
</html>
.body{
    margin:0 auto;    
    text-align:center;
}
.oo{    
display:block;    
width:43px;    
height:44px;    
background:url(images/img_navsprites_hover.gif) no-repeat;
    margin:20px auto;
}
.span1{    
background-position:0 0;    
position:absolute;
    top:0px;
}
.span2{    
background-position:-47px 0;    
position:absolute;
    top:0px;
    left:60px;
}
.span3{    
background-position:-94px 0;    
position:absolute;
    top:0px;
    left:120px;
}
.span1:hover{    
background-position:0 -45px;
}
.span2:hover{    
background-position:-47px -45px;
}
.span3:hover{    
background-position:-94px -45px;
}
.pp{    
display:block;    
width:38px;    
height:38px;    
background:url(images/pwd-icons-new.png) no-repeat;
    
    margin:20px auto;
}
.span4{    
background-position:-48px -96px;
}
.ll{    
display:block;    
width:24px;    
height:26px;    
background:url(images/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png) no-repeat;
    margin:20px auto;
}
.span5{    
background-position:0 -483px;
}
.hh{    
display:block;    
width:18px;    
height:18px;    
background:url(images/toolbars.png) no-repeat;
    margin:20px auto;
}
.span6{    
background-position:-95px -211px;
}

**background-position:npx npx;
(Der erste Wert dient zum Anpassen von links und rechts. Wenn Sie das Hintergrundbild nach rechts anpassen müssen, verwenden Sie einen positiven Wert und nach links , verwenden Sie auf die gleiche Weise das Hintergrundbild nach oben und unten. Verwenden Sie beim Anpassen negative Werte für die Oberseite und positive Werte für die Unterseite) **
Die Darstellung ist wie folgt:
(Dies ist das Originalbild)

Wie CSS Sprite die Bildstichtechnologie implementiert

(Dies ist das Bild nach der Auswahl) Wie CSS Sprite die Bildstichtechnologie implementiert

Das erste Bild ist die Konvertierung des Originalbildes und das Schloss des zweiten Bildes ist der Zug im Bild;

Verwandte Empfehlungen:

So verwenden Sie CSS, um den Effekt abgerundeter Ränder zu erzielen

So verwenden Sie CSS3, um dies zu erreichen Text-Origami-Effekt

Das obige ist der detaillierte Inhalt vonWie CSS Sprite die Bildstichtechnologie implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Parsen des Texteinzugs im CSS-TextattributNächster Artikel：Parsen des Texteinzugs im CSS-Textattribut

In Verbindung stehende Artikel

Mehr sehen