Image Sprite trong CSS

Thanh Huyen

Hình ảnh Sprite là gì?

Hình ảnh Sprite là một tập hợp các hình ảnh trang trí như icon hay button nằm trong một file hình duy nhất, sau đó dùng thuộc tính background của CSS để hiện ra đúng vị trí cần thiết.

Các trang web có nhiều hình ảnh thường mất nhiều thời gian để tải và tạo ra nhiều yêu cầu của máy chủ, vì vậy sử dụng hình ảnh sprite sẽ giảm tải yêu cầu tới máy chủ, giảm dung lượng file hình, tăng tốc độ tải trang và tiết kiệm tài nguyên hệ thống.

Cách này thường được áp dụng với các hiệu ứng hover, active hay focus để tạo các nút bấm động một cách mượt mà hơn hoặc để chứa các icon trang trí.

Ví dụ Hình ảnh Sprite đơn giản

Thay vì dùng ba hình ảnh riêng biệt, ta sử dụng hình ảnh đơn này (“img_navsprites.gif”):

Đây là 3 icon đã xử lý được đặt vào một hình duy nhất. Điều quan trọng khi sử dụng sprite là bạn phải biết chính xác vị trí cũng như kích thước của 3 icon này. Viết code như sau để hiển thị chúng tách biệt:

<!DOCTYPE html>
<html>
<head>
<style>
#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

#next {
  width: 43px;
  height: 44px;
  background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>

<img id="home" src="img_trans.gif" width="1" height="1"><br><br>
<img id="next" src="img_trans.gif" width="1" height="1">

</body>
</html>

Kết quả hiển thị:

Trong đó:

width: 46px; height: 44px

>> Xác định phần hình ảnh muốn sử dụng. Lưu ý kích thước width và height vì đây là phần hiển thị của icon nên phải tính toán chính xác. Nên đặt nó vừa vặn với kích thước icon.

background: url(img_navsprites.gif) 0 0

>> Xác định ảnh sprite và vị trí của nó (trái 0px, trên cùng 0px).

<img id=”home” src=”img_trans.gif”>

>> Sử dụng để chỉ định một hình ảnh nhỏ trong suốt không ảnh hưởng tới kết quả vì thuộc tính src không thể để trống.

Đây là cách dễ dàng nhất để sử dụng hình ảnh sprite. Theo dõi tiếp các ví dụ sau để chèn liên kết và hover hình ảnh.

Tạo danh mục điều hướng với hình ảnh sprite

Gắn link vào các icon để điều hướng đến một liên kết khác. Bạn thử như sau:

<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

Xác định kích thước các thành phần ảnh như sau:

#home {left:0px;width:46px;}

>> Sử dụng toàn bộ phần bên trái và có độ rộng hình ảnh là 46px.

#home {background:url(img_navsprites.gif) 0 0;}

>> Sử dụng phần trên cùng bên trái của file ảnh nên có vị trí : left: 0px, top: 0px.

#prev {left:63px;width:43px;}

>> Vị trí 63px tính từ trái qua phải (độ rộng của #home là 46px + khoảng cách bạn muốn giữa 2 icon), độ rộng hình ảnh là 43px.

#prev {background:url('img_navsprites.gif') -47px 0;}

>> icon có vị trí cách bên trái 47px (Bằng độ rộng của #home 46px + 1px của đường phân cách) , do đó ta phải di chuyển thành phần ảnh này sang trái -47px để trở về đúng vị trí 0 0.

#next {left:129px;width:43px;}

>> Ví trí 129px tính từ trái qua phải (điểm bắt đầu của #prev la 63px + độ rộng của #prev là 43px + khoảng cách bạn muốn giữa 2 icon), độ rộng hình ảnh là 43px.

#next {background:url('img_navsprites.gif') -91px 0;}

>> icon có vị trí cách bên trái 91px (Bằng độ rộng của #home 46 px + 1px đường phân cách+ độ rộng #prev là 43px + 1px đường phân cách).

Hiệu ứng khi di chuột vào hình ảnh sprite

Thêm hiệu ứng di chuột vào danh mục điều hướng vừa tạo ở trên để các thành phần trở nên sống động hơn.

Đầu tiên, tạo một hình sprite mới (“img_navsprites_hover.gif”) chứa ba hình ảnh điều hướng và ba hình ảnh để sử dụng cho hiệu ứng di chuột:

Cái lợi khi sử dụng sprite này vì đây là một ảnh duy nhất chứ không phải sáu tệp riêng biệt, sẽ không có sự chậm trễ phải chờ yêu cầu tới máy chủ khi người dùng di chuột qua hình ảnh. Thêm ba dòng code để bổ sung hiệu ứng hover:

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}

Code đầy đủ:

<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites_hover.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -91px 0;
}

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>