CSS Image Sprite là tệp hình ảnh kết hợp của tất cả hình ảnh trong một trang tài liệu. Image sprites hữu ích vì tài nguyên hình ảnh chỉ cần tải một lần. Sử dụng background-position trong CSS, các phần khác nhau của hình ảnh kết hợp có thể được hiển thị.
Ví dụ cho CSS Image Sprites:
Ví dụ
<!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>
Kết quả
