Tìm Hiểu CSS Image Sprites

Thông thường khi load 1 trang web thì ta thấy có nhiều hình ảnh đi kèm ,tuy nhiên với css image sprites tất cả ảnh sẽ được đặt vào trong 1 bức ảnh duy nhất .Sau đó ta dùng thuộc tính background-position của CSS để hiện ra ảnh cần lấy .
ưu điểm của css image sprite
Thay vì load nhiều ảnh ta sẽ chỉ load 1 ảnh duy nhất  , chỉ phải gửi request đến server 1 lần để lấy ảnh thay vì gửi nhiều request đến server tiết kiệm bandwidth.

Tăng tốc độ tải 1 website.
Sử dụng
Dùng 1 hình lớn đã chuẩn bị để làm background, kết hợp với thuộc tính background-position trong css để hiển thị chính xác phần hình ảnh mong muốn.
tất nhiên muốn xác định chính xác vị trí ta phải dùng đến photoshop trong việc này

.anh1 {
height:60px;
width:114px;
background-image:url(other-projects.jpg);
background-position:0 0;
}
.anh3{
height:60px;
width:114px;
background-image:url(other-projects.jpg);
background-position:-114px 0px;
}
.anh4{
height:60px;
width:114px;
background-image:url(other-projects.jpg);
background-position:-230px 0px;
}

Cách làm  Trong  quá trình cắt layout. , thông thường ta đặt tất cả ảnh theo chiều dọc hay chiều ngang tại các vị trí thuận lợi cho việc  tạo CSS sau này. Bạn có thể ghi lại ngay , để sau này khỏi cần mở file ra canh lại.

đọc thêm ví dụ 1  ví dụ 2 ví dụ 3