इमेज स्प्राइट का उपयोग HTTP रिक्वेस्ट की संख्या कम करने के लिए किया जाता है जो हमारी साइट का लोड टाइम तेज़ बनाता है।
CSS इमेज स्प्राइट का उपयोग करके नेविगेशन मेनू बनाने का कोड निम्न है -
उदाहरण
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 0px; } span { width: 200px; height: 300px; background-color: black; } nav { background-color: black; height: 50px; padding-top: 15px; padding-left: 10px; } nav a { font-size: 20px; color: white; text-decoration: none; margin-right: 10px; } .home { width: 32px; height: 32px; background: url("css_sprites.png") -62px -62px; } .search { width: 32px; height: 32px; background: url("css_sprites.png") -10px -62px; } .phone { width: 32px; height: 32px; background: url("css_sprites.png") -62px -10px; } .user { width: 32px; height: 32px; background: url("css_sprites.png") -10px -10px; } </style> </head> <body> <nav> <img class="home" /> <a href="">HOME</a> <img class="phone" /> <a href="">Call Us</a> <img class="user" /> <a href="">Our Team</a> <img class="search" /> <a href="">Search</a> </nav> <h1> Main content here </h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, non! Numquam reprehenderit alias, nisi eos corrupti repudiandae deleniti illo officiis!</p> </body> </html>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
