Bài 34: Hình ảnh Sprites trong CSS

Hình ảnh sprites

Hình ảnh sprites là một tập hợp các hình ảnh nhỏ được đưa vào một ảnh lớn duy nhất.
Một trang web với nhiều ảnh có thể chiếm nhiều thời gian tải và tạo ra nhiều yêu cầu cho máy chủ.
Sử dụng ảnh sprites sẽ giảm tải số lần yêu cầu đến máy chủ và tiết kiệm băng thông, tăng tốc độ tải trang cho hệ thống.

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

Thay vì sử dụng ba ảnh riêng biệt, chúng ta sử dụng một ảnh duy nhất:

Với CSS, chúng ta có thể hiển thị hình ảnh mà chúng ta cần.
Trong ví dụ sau, CSS xác định phần tử nào của hình ảnh “img_navsprites.gif” sẽ hiển thị:

#home {
  width: 46px;
  height: 44px;
  background: url(https://timoday.edu.vn/wp-content/uploads/2021/05/img_navsprites.gif) 0 0;
}

Giải thích ví dụ:

• <img id="home" src="https://timoday.edu.vn/wp-content/uploads/2021/05/img_trans.gif"> – Chỉ xác định một hình ảnh nhỏ trong suốt bởi vì thuộc tính src không được để trống. Hình ảnh hiển thị sẽ là hình nền mà chúng ta xác định trong CSS
• width: 46px; height: 44px; – Xác định phần hình ảnh mà chúng ta muốn sử dụng
• background: url(https://timoday.edu.vn/wp-content/uploads/2021/05/img_navsprites.gif) 0 0; – Xác định ảnh nền và vị trí của nó (left 0px, top 0px)

Đây là cách dễ dàng nhất để sử dụng hình ảnh sprites, bây giờ chúng ta sẽ mở rộng nó bằng cách sử dụng liên kết và hiệu ứng di chuột.

Hình ảnh sprites – Cách tạo danh sách điều hướng

Chúng ta muốn sử dụng hình ảnh sprite (“img_navsprites.gif”) để tạo danh sách điều hướng.
Chúng ta sẽ sử dụng danh sách HTML, bởi vì nó có thể là một liên kết và cũng hỗ trợ ảnh nền:

#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('https://timoday.edu.vn/wp-content/uploads/2021/05/img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('https://timoday.edu.vn/wp-content/uploads/2021/05/img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('https://timoday.edu.vn/wp-content/uploads/2021/05/img_navsprites.gif') -91px 0;
}

Giải thích ví dụ:

• #navlist {position: relative;} – vị trí được đặt thành tương đối để cho phép định vị tuyệt đối bên trong nó
• #navlist li {margin: 0; padding: 0; list-style: none; position: Absol; top: 0;} – margin và padding được đặt thành 0, list-style bị xóa và tất cả các mục trong danh sách đều được đặt ở vị trí tuyệt đối
• #navlist li, #navlist a {height: 44px; display: block;} – chiều cao của tất cả các hình ảnh là 44px

Bây giờ hãy bắt đầu xác định và tạo kiểu cho từng phần cụ thể:

• #home {left: 0px; width: 46px;} – Được định vị ở phía bên trái và chiều rộng của hình ảnh là 46px
• #home {background: url (https://timoday.edu.vn/wp-content/uploads/2021/05/img_navsprites.gif) 0 0;} – Xác định hình nền và vị trí của nó (trái 0px, trên cùng 0px)
• #prev {left: 63px; width: 43px;} – Định vị 63px ở bên phải (#home có chiều rộng là 46px + một số khoảng trống thừa giữa các mục) và chiều rộng là 43px
• #prev {background: url ('https://timoday.edu.vn/wp-content/uploads/2021/05/img_navsprites.gif') -47px 0;} – Xác định hình nền 47px ở bên phải (#home có chiều rộng là 46px + 1px vạch chia dòng)
• #next {left: 129px; width: 43px;} – Định vị 129px ở bên phải (phần đầu của #prev là 63px + chiều rộng của #prev là 43px + không gian thêm) và chiều rộng là 43px
• #next {background: url ('https://timoday.edu.vn/wp-content/uploads/2021/05/img_navsprites.gif') -91px 0;} – Xác định hình nền 91px ở bên phải (chiều rộng của #home là 46px + 1px vạch chia dòng + chiều rộng của #prev là 43px + 1px vạch chia dòng)

Hình ảnh sprites – Hiệu ứng di chuột

Bây giờ chúng ta sẽ thêm hiệu ứng di chuột vào danh sách điều hướng.

Hình ảnh mới (“img_navsprites_hover.gif”) trong vùng chứa có 3 hình ảnh điều hướng và ba ảnh sử dụng cho hiệu ứng di chuột:

Bởi vì đây là một ảnh riêng biệt, và không phải 6 tệp riêng biệt, điều này sẽ không có độ chậm trễ khi người dùng hiệu ứng di chuột qua hình ảnh.
Chúng ta chỉ thêm ba dòng mã để tạo hiệu ứng di chuột:

#home a:hover {
  background: url('https://timoday.edu.vn/wp-content/uploads/2021/05/img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('https://timoday.edu.vn/wp-content/uploads/2021/05/img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('https://timoday.edu.vn/wp-content/uploads/2021/05/img_navsprites_hover.gif') -91px -45px;
}

Giải thích ví dụ:

• #home a:hover {background: url ('https://timoday.edu.vn/wp-content/uploads/2021/05/img_navsprites_hover.gif') 0 -45px;} – Đối với cả ba hình ảnh di chuột, chúng ta chỉ định cùng một vị trí nền, chỉ 45px thêm xuống