Latest web development tutorials

CSS Bildmosaik-Technologie

Split Bild

Flatten das Bild ist eine Sammlung von Einzelbildern.

Es gibt viele Bilder auf der Seite, um eine lange Zeit zu laden, kann nehmen und erzeugt mehrere Serveranforderungen.

Verwenden Sie ein Bildserver Split wird die Anzahl der Anfragen zu reduzieren und Bandbreite zu sparen.


Split Bild - einfaches Beispiel

Anstelle von drei separate Bilder verwenden, wie wir dieses Einzelbild verwenden ( "img_navsprites.gif"):

Navigation Bilder

Mit CSS können wir nur einen Teil des Bildes zeigen, was wir brauchen.

Im Beispiel unten zeigt einen Teil des angegebenen CSS "img_navsprites.gif" Bild:

Beispiele

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

Versuchen »

Analyse Beispiele:

  • <Img class = "home" src = "img_trans.gif" /> - weil sie nicht leer sein kann, definiert src-Attribut nur ein kleines transparentes Bild. Das angezeigte Bild werden wir in CSS Hintergrundbilder festlegen
  • Breite: 46px; height: 44px; - definiert ein Teil des Bildes, das wir verwenden
  • background: url (img_navsprites.gif) 0 0; - kundenspezifische Hintergrundbild und seine Position (links 0px, oben 0px)

Dies geschieht mit Hilfe ein Bild der einfachste Weg geteilt, und jetzt setzen wir Links und Hover-Effekte.


Glätten Sie das Bild - eine Navigationsliste erstellen

Wir wollen das geteilte Bild zu verwenden ( "img_navsprites.gif"), eine Navigationsliste zu erstellen.

Wir werden eine HTML-Liste verwenden, da sie verknüpft werden können, und unterstützt auch ein Hintergrundbild:

Beispiele

#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;}

Versuchen »

Analyse Beispiele:

  • #navlist {position: relative;} - Position relative Positionierung eingestellt ist, erlauben die absolute Positionierung innerhalb
  • #navlist li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} - margin und padding auf 0 gesetzt ist, wird die Liste Stil gelöscht, werden alle Listenelemente sind absolute Positionierung
  • #navlist li, #navlist eine {height: 44px; display: block;} - die Höhe aller Bilder ist 44px

Nun hat jeder spezifische Teilepositionierung und Stil:

  • #Home {left: 0px; width: 46px;} - nach links positioniert, und die Art und Weise die Bildbreite ist 46px
  • #Home {background: url (img_navsprites.gif) 0 0;} - kundenspezifische Hintergrundbild und seine Position (links 0px, oben 0px)
  • #prev {left: 63px; width: 43px;} - auf die richtige Positionierung 63px (#Home Breite 46px + etwas mehr Abstand zwischen den Elementen), eine Breite von 43px.
  • #prev {background: url ( 'img_navsprites.gif') -47px 0;} - kundenspezifische Hintergrundbild auf der rechten Seite 47px (#Home Teiler Breite 46px + 1px)
  • #next {left: 129px; width: 43px;} - auf die richtige Positionierung 129px (#prev 63px + #prev Breite 43px ist + verbleibende Raum) ist die Breite 43px.
  • #next {background: url ( 'img_navsprites.gif') no-repeat -91px 0;} - kundenspezifische Hintergrundbild auf der rechten Seite 91px (#Home 46px + 1px Trennlinie + # i.Vj. Breite 43px + 1px Teiler)

Flatten das Bild s - Hover-Effekt

Jetzt wollen wir unsere Navigationsliste ein Hover-Effekt hinzuzufügen.

Lampe : Der Effekt schweben Wähler zum Schweben über dem Element Anzeige

Tipp :: Hover - Selektor kann auf alle Elemente angewendet werden.

Unser neues Bild ( "img_navsprites_hover.gif") enthält drei Navigations Bilder und drei Bilder:

Navigation Bilder

Da dies ein einzelnes Bild ist, anstelle von sechs separate Bilddatei, wenn ein Benutzer auf das Bild bleibt nicht Laden verzögern.

Wir fügen Hover-Effekte nur drei Zeilen Code hinzufügen:

Beispiele

#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;}

Versuchen »

Analyse Beispiele:

  • Da das Listenelement einen Link enthält, können wir die Verwendung: Pseudoklasse schweben
  • #Home a: Hover {background: transparent url (img_navsprites_hover.gif) 0 -45px;} - Für alle drei Hover-Bilder, die wir den gleichen Hintergrund Position angeben, aber dann nach unten 45px jeder