স্প্রাইট শিট থেকে `background-position` সেট করে নির্দিষ্ট আইকন প্রদর্শন করা যায়।
উদাহরণ: স্প্রাইট থেকে আইকন দেখানো
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.twitter,.facebook {
background: url(sprites_64.png) no-repeat;
display:inline-block; width: 64px; height: 64px; margin:10px 4px;
}
.facebook { background-position: 0 -148px; }
</style>
</head>
<body>
<h1>ইমেজ স্প্রাইট উদাহরণ</h1>
<a class="twitter"></a>
<a class="facebook"></a>
</body>
</html>
কোড ব্যাখ্যা
- background: url(...) no-repeat: স্প্রাইট শিট লোড করে, রিপিট বন্ধ।
- width/height: 64px: প্রতিটি আইকনের আকার।
- .facebook { background-position: 0 -148px; }: ফেসবুক আইকনের অবস্থান।
- .twitter (ডিফল্ট 0 0): টুইটার আইকন শীর্ষে বামে।
স্প্রাইট শিট তৈরি
ফটোশপ, গিম্প, বা অনলাইন টুলে আইকনগুলো গ্রিডে সাজিয়ে এক ছবি বানান। প্রতিটি আইকনের কোঅর্ডিনেট নোট করুন।
