Kỹ thuật này vẫn đang được Facebook và rất nhiều website sử dụng, vậy tại sao chúng ta lại không sử dụng nó?
Bình thường
Khi thực hiện viết HTML, chúng ta thường lưu tất cả thành những hình ảnh riêng biệt, rồi sử dụng thẻ <img> để hiển thị chúng. Ví dụ:
<img src="img/icon-1.png" alt="Icon 1">
<img src="img/icon-2.png" alt="Icon 2">
<img src="img/icon-3.png" alt="Icon 3">
Cách này thuận tiện và đơn giản nhưng tốn đến 3 request gửi đến server, trong trường hợp nhiều hình hơn thì thời gian tải trang sẽ rất rất lâu.
background-position thủ công, bạn có thể sử dụng Init Sprite Sheet.
Công cụ giúp bạn tạo CSS Sprite Sheet online từ nhiều ảnh icon PNG, WebP hoặc JPG chỉ trong vài giây. Hệ thống sẽ tự động ghép ảnh thành một sprite sheet duy nhất, đồng thời generate sẵn CSS class, hiển thị preview kết quả và cho phép tải file PNG ngay sau khi xử lý.
CSS Image Sprites
Ta có thể ghép tất cả các hình ảnh, icon… vào 1 hình duy nhất, ví dụ:
Sau đó dùng các thuộc tính background của CSS để tạo ra các hình ảnh riêng biệt.
HTML
<div class="sprite icon-1"></div>
<div class="sprite icon-2"></div>
<div class="sprite icon-3"></div>CSS
.sprite {
background-image: url(sprite.png);
background-size: auto;
background-repeat: no-repeat;
display: inline-block;
height: 25px;
width: 25px;
}
.icon-1 {
background-position: 0 0;
}
.icon-2 {
background-position: 0 -25px;
}
.icon-3 {
background-position: 0 -50px;
}Chúc các bạn thành công!
Bình luận