In diesem Kapitel erfahren Sie, wie Sie die Bildstichtechnologie in CSS verwenden. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
1. Image Stitching
Image Stitching ist eine Sammlung einzelner Bilder.
Das Laden von Webseiten mit vielen Bildern und das Generieren von Anfragen an mehrere Server kann lange dauern.
Durch die Verwendung von Image Stitching wird die Anzahl der Serveranfragen reduziert und Bandbreite gespart.
2. Bildzusammenfügung – einfaches Beispiel
Anstatt drei unabhängige Bilder zu verwenden, verwenden wir dieses einzelne Bild („img_navsprites. gif“). :
Mit CSS können wir nur den Teil des Bildes anzeigen, den wir benötigen.
Im folgenden Beispiel spezifiziert CSS einen Teil des Bildes, das „img_navsprites.gif“ anzeigt:
img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}Beispielanalyse:
-Da es nicht leer sein darf, definiert das src-Attribut nur ein kleines transparentes Bild. Das angezeigte Bild ist das Hintergrundbild, das wir in CSS angegeben haben
Breite: 46px; Höhe: 44px – Definieren Sie den Teil des Bildes, den wir verwenden
background:url(img_navsprites.gif) 0 0; – Definieren Sie das Hintergrundbild und seine Position (links 0px, oben 0px)
Dies ist die einfachste Möglichkeit, Bildzusammenfügungen zu verwenden , jetzt verwenden wir Links und Hover-Effekte.
3. Bildzusammenfügung – Erstellen Sie eine Navigationsliste
Wir möchten zusammengefügte Bilder („img_navsprites.gif“) verwenden, um eine Navigation zu erstellen Liste.
Wir werden eine HTML-Liste verwenden, da diese verlinkbar ist und auch Hintergrundbilder unterstützt:
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}Beispielauflösung:
#navlist{position :relative ;} – Die Position legt die relative Positionierung fest, sodass die absolute Positionierung innerhalb von
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top :0;} – Rand und Abstand werden auf 0 gesetzt, der Listenstil wird entfernt und alle Listenelemente werden absolut positioniert
#navlist li, #navlist a{height:44px; display:block ;} – Die Höhe aller Bilder beträgt 44 Pixel
Nun zur Positionierung und Gestaltung der einzelnen Abschnitte:
#home {left:0px ;width:46px;} – Positionieren Sie es ganz links und die Breite des Bildes beträgt 46px
#home{background:url(img_navsprites.gif) 0 0 ;} - Definieren Sie das Hintergrundbild und seine Position (0px links, 0px oben)
#prev{left:63px;width:43px;} - 63px rechts positioniert (#home Breite 46 Pixel + zwischen den Elementen etwas zusätzlicher Platz) mit einer Breite von 43 Pixel.
#prev{background:url('img_navsprites.gif') -47px 0;} – Hintergrundbild 47px nach rechts definieren (#home-Breite 46px + 1px der Trennlinie)
#next{left:129px;width:43px;}- Die rechte Position ist 129px (#prev 63px + #prev Breite ist 43px + verbleibender Platz), die Breite beträgt 43px.
#next{background:url('img_navsprites.gif') no-repeat -91px 0;} – Definieren Sie 91px auf der rechten Seite des Hintergrundbilds (#home 46px+1px Trennlinie + #prev (Breite 43 Pixel + 1 Pixel Trennlinie)
4. Bildzusammenfügung – Hover-Effekt
Nun, wir Möchten Sie, dass unsere Navigation der Liste einen Hover-Effekt hinzufügt?
:hover-Selektor wird verwendet, um den Effekt anzuzeigen, wenn die Maus über das Element fährt
Tipp: Der :hover-Selektor kann auf alle Elemente angewendet werden.
Unser neues Bild („img_navsprites_hover.gif“) enthält drei Navigationsbilder und drei Bilder:
Weil es sich um ein einzelnes Bild handelt, statt um sechs separate Bei Bilddateien erfolgt kein verzögertes Laden, wenn der Benutzer mit der Maus über das Bild fährt.
Wir fügen nur drei Codezeilen hinzu, um den Hover-Effekt hinzuzufügen:
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}Beispielanalyse:
Da das Listenelement einen Link enthält, haben wir kann :hover-Pseudoklasse
#home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} verwenden – Für alle drei Hover-Bilder geben wir dasselbe an Hintergrundposition, jeweils nur 45 Pixel weiter unten
Das obige ist der detaillierte Inhalt vonWie nutzt CSS die Bildreduzierungstechnologie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
