CSS Image Sprite হল একটি ডকুমেন্ট পেজের সব ছবির সংমিশ্রিত ইমেজ ফাইল। ইমেজ স্প্রাইটস উপকারী কারণ ইমেজ রিসোর্সগুলো শুধু একবার লোড করতে হয়। CSS background-position ব্যবহার করে সংমিশ্রিত ইমেজের বিভিন্ন অংশ দেখানো যায়।
CSS Image Sprites এর একটি উদাহরণ দেখি:
উদাহরণ
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .sprite { background: url("Capture.png") no-repeat; width: 280px; height: 200px; display: inline-block; } .flag1 { background-position: 0px 0px; } .flag2 { background-position: -255px 0px; } .flag3 { background-position: -510px 0px; } .flag4 { background-position: -765px 0px; } body { text-align: center; } </style> </head> <body> <div><h1>Flag Image Sprite</h1></div> <div class="sprite flag1"></div> <div class="sprite flag2"></div> <div class="sprite flag3"></div> <div class="sprite flag4"></div> </body> </html>
আউটপুট
