Image Sprites CSS

Εικόνες φαντάσματος

Οι εικόνες φαντάσματος είναι σύνολο εικόνων που περιέχονται σε μια μοναδική εικόνα.

Οι ιστοσελίδες που περιέχουν πολλές εικόνες μπορεί να χρειάζονται πολύ χρόνο για να φορτώσουν και να δημιουργήσουν πολλαπλά αιτήματα εξυπηρέτησης.

Η χρήση εικόνων φαντάσματος μειώνει τον αριθμό των αιτημάτων εξυπηρέτησης και εξοικονομεί ζώνη

Εικόνες φαντάσματος - Σاده παράδειγμα

Χρησιμοποιούμε την παρακάτω μοναδική εικόνα ('navsprites.gif') αντί για τρεις ξεχωριστές εικόνες:

ναυτιλιακή εικόνα

Με τη χρήση του CSS, μπορούμε να εμφανίσουμε μόνο το μέρος της εικόνας που χρειαζόμαστε.

Στο παρακάτω παράδειγμα, το CSS ορίζει ποιο μέρος της εικόνας 'navsprites.gif' θα εμφανιστεί:

παράδειγμα

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

Δοκιμάστε το προσωπικά

Παράδειγμα Επεξήγησης:

  • <img id="home" src="trans.gif"> - Ορίζουμε μόνο μικρή διαφανή εικόνα, επειδή η ιδιότητα src δεν μπορεί να είναι κενή. Η πραγματική εικόνα που θα εμφανιστεί θα είναι η εικόνα φόντου που ορίζουμε στο CSS.
  • width: 46px; height: 44px; - Ορίζουμε την περιοχή της εικόνας που θα χρησιμοποιήσουμε
  • background: url(navsprites.gif) 0 0; - Ορίζουμε την εικόνα φόντου και τη θέση της (left 0px, top 0px)

Εικόνες φαντάσματος - Δημιουργία λίστας καθοδήγησης

Επιθυμούμε να χρησιμοποιήσουμε εικόνες φαντάσματος ('navsprites.gif') για τη δημιουργία μιας λίστα καθοδήγησης.

Θα χρησιμοποιήσουμε λίστες HTML, γιατί μπορούν να είναι συνδέσμοι και υποστηρίζουν εικόνες φόντου:

παράδειγμα

#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;
  background: url('img_navsprites.gif') 0 0;
}
#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}
#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

Δοκιμάστε το προσωπικά

Παράδειγμα Επεξήγησης:

  • #navlist {position:relative;} - Η θέση ορίζεται ως σχετική, για να επιτρέπεται η απόλυτη τοποθέτηση εντός αυτής
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - το περιθώριο και η ενσωμάτωση ορίζονται σε 0, διαγράφεται το list-style και όλα τα στοιχεία της λίστας είναι απόλυτη θέση
  • #navlist li, #navlist a {height:44px;display:block;} - το ύψος όλων των εικόνων είναι 44px

Τώρα ξεκινάμε να ρυθμίζουμε τη θέση και τον τύπο για κάθε συγκεκριμένο τμήμα:

  • #home {left:0px;width:46px;} - συνεχής θέση προς τα αριστερά, πλάτος εικόνας 46px
  • #home {background:url(navsprites.gif) 0 0;} - ορίζει την εικόνα φόντου και τη θέση (left 0px, top 0px)
  • #prev {left:63px;width:43px;} - ορίζει τη θέση προς τα δεξιά 63px (#home πλάτος 46px + επιπλέον χώρος)
  • #prev {background:url('navsprites.gif') -47px 0;} - ορίζει την εικόνα φόντου προς τα δεξιά 47px (#home πλάτος 46px + 1px διαχωρισμός)
  • #next {left:129px;width:43px;} - ορίζει τη θέση προς τα δεξιά 129px (#prev αρχική θέση 63px + πλάτος του #prev 43px + επιπλέον χώρος)
  • #next {background:url('navsprites.gif') -91px 0;} - ορίζει την εικόνα φόντου προς τα δεξιά 91px (#home πλάτος 46px + 1px διαχωρισμός+ #prev πλάτος 43px + 1px διαχωρισμός)

εικονίδια πλοήγησης - ενέργεια πτήσης

Τώρα, προσθέτουμε την ενέργεια πτήσης στη λίστα πλοήγησης.

Συμβουλή::hover επιλογέας μπορεί να χρησιμοποιηθεί για όλους τους στοιχεία, και όχι μόνο για τους σύνδεσμους.

η νέα μας εικόνα ("navsprites_hover.gif") περιέχει τρία εικονίδια πλοήγησης και τρία εικονίδια για την ενέργεια πτήσης:

ναυτιλιακή εικόνα

γιατί αυτό είναι ένα εικόνα, και όχι έξι ανεξάρτητα αρχεία, οπότε όταν ο χρήστης θέτει το ποντίκι πάνω στην εικόνα:δεν θα υπάρξει καθυστέρηση φόρτωσης.

προσθέτουμε μόνο τρεις γραμμές κώδικα για να επιτύχουμε την ενέργεια πτήσης:

παράδειγμα

#home a:hover {
  background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
  background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
  background: url('navsprites_hover.gif') -91px -45px;
}

Δοκιμάστε το προσωπικά

Παράδειγμα Επεξήγησης:

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Είμαστε όλοι οι τρεις απεικονίσεις αναφοράς της ίδιας θέσης του φόντου, μόνο προς τα κάτω 45 εικονοστοιχεία