CSS Image sprites

21/05/2019

Bài sau » « Bài trước

Image sprites là một hình ảnh chứa nhiều hình ảnh khác, thường là các icon của website.

Một trang web với nhiều hình ảnh sẽ làm tốn thời gian load và tạo nhiều request gửi đến server. Vì vậy, Sử dụng Image sprites để giảm request tới server và tiết kiệm băng thông.

Sử dụng image sprites

Ví dụ ta có hình image sprites như sau:

CSS Image sprites

Với CSS, Ta có thể cắt 1 phần hình ảnh nào nếu cần. Xem đoạn code CSS dưới đây:

#icon_home { width: 46px; height: 44px; background: url(img_navsprites.gif) 0 0; }

Code HTML:

<img id="icon_home" src="img_trans.gif" width="1" height="1" >

Giải thích ví dụ:

- Trong thẻ <img> thuộc tính src ta cho 1 hình ảnh 1x1 px trong suốt, vì thuộc tính src không được để trống.

- Trong CSS, ta khai báo width: 46px, height: 44px là độ rộng và chiều cao mà hình ảnh sẽ hiển thị.

- Khai báo background: url(img_navsprites.gif) 0 0; là sử dụng background image và position (left 0px, top 0px). Khi đó hình hiển thị trong image là hình ảnh được cắt từ image sprites từ vị trí left: 0px, top: 0px và rộng 46px, cao 44px.

Kết quả hiển thị như sau:

CSS Image sprites

Sử dụng image sprites Cho hover effect

Ở phần trên ta cắt được từng icon riêng. Bây giờ ta muốn hover vào thì đổi icon khác. Như vậy ta phải làm hình như sau:

CSS Image sprites

Hàng đầu tiên là trạng thái bình thường, khi hover chuột vào ta đổi thành hình ở hàng dưới. Ta làm như sau:

#icon_home2 { width: 46px; height: 44px; background: url(img_navsprites.gif) 0 0; } #icon_home2:hover{ background: url(img_navsprites.gif) 0 -45px; }

Code HTML:

<img id="icon_home" src="img_trans.gif" width="1" height="1" >

Giải thích ví dụ:

- Khai báo #icon_home2:hover{ background: url(img_navsprites.gif) 0 -45px; } là sử dụng background image và position (left 0px, top -45px). Khi đó hình hiển thị trong image là hình ảnh được cắt từ image sprites từ vị trí left: 0px, top: -45px và rộng 46px, cao 44px. 

- Chỗ thuộc tính top -45px là vì: chiều cao hình ảnh là 44px, giữa 2 hàng có đường line 1px, nên ta phải dịch vị trí xuống 1px nữa.

- Và tại sao là -45px mà không phải là 45px ? Vì trong image sprites thì góc tọa độ trên cùng bên trái trùng với góc tọa độ O trong hệ qui chiếu Oxy. Phần hình ảnh nằm phía dưới - trục âm. Xem hình minh họa bên dưới:

CSS image sprites

Kết quả hiển thị như sau:

CSS Image sprites

Yeah, vậy là bài hướng dẫn CSS Image sprites đã kết thúc. Tính năng image sprites này khi làm các dự án lớn có nhiều hình ảnh, icon,... sẽ phải sử dụng rất nhiều. Chúc các bạn thực hành thành công.

Bài sau » « Bài trước
Back to top