CSS Sprites

Hình ảnh Sprites

Một sprite hình ảnh là một tập hợp các hình ảnh được đưa vào một hình ảnh duy nhất.


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

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

Thay vì sử dụng ba hình ảnh riêng biệt, chúng tôi sử dụng hình ảnh duy nhất này ("img_navsprites.gif"):

Với CSS, chúng tôi chỉ có thể hiển thị phần hình ảnh chúng tôi cần.

Trong ví dụ sau, CSS chỉ định phần nào của hình ảnh "img_navsprites.gif" sẽ hiển thị:

Thí dụ
#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

Ví dụ giải thích:

<img id="home" src="img_trans.gif">- Chỉ xác định một hình ảnh trong suốt nhỏ vì thuộc tính src không thể để trống. Hình ảnh hiển thị sẽ là hình nền mà chúng tôi chỉ định trong CSS
width: 46px; height: 44px; - Xác định phần hình ảnh chúng tôi muốn sử dụng
background: url(img_navsprites.gif) 0 0; - Xác định hình nền và vị trí của nó (bên trái 0px, trên 0px)
Đây là cách dễ nhất để sử dụng các họa tiết hình ảnh, bây giờ chúng tôi muốn mở rộng nó bằng cách sử dụng các liên kết và hiệu ứng di chuột.

Hình ảnh Sprites - Tạo Danh sách Điều hướng
Chúng tôi muốn sử dụng hình ảnh sprite ("img_navsprites.gif") để tạo danh sách điều hướng.

Chúng tôi sẽ sử dụng danh sách HTML, vì nó có thể là một liên kết và cũng hỗ trợ hình ảnh nền:

Thí dụ
#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;
}

Ví dụ giải thích:

#navlist {vị trí: tương đối;} - vị trí được đặt thành tương đối để cho phép định vị tuyệt đối bên trong nó
#navlist li {lề: 0; padding: 0; list-style: none; vị trí: tuyệt đối; top: 0;} - lề và phần đệm được đặt thành 0, kiểu danh sách được loại bỏ và tất cả các mục danh sách được định vị 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ờ bắt đầu vị trí và phong cách cho từng phần cụ thể:

#home {left: 0px; width: 46px;} - Định vị toàn bộ bên trái và chiều rộng của hình ảnh là 46px
#home {nền: url (img_navsprites.gif) 0 0;} - Xác định hình nền và vị trí của nó (bên trái 0px, trên 0px)
#prev {left: 63px; width: 43px;} - Định vị 63px ở bên phải (#home width 46px + một số khoảng trắng thừa giữa các mục) và chiều rộng là 43px.
#prev {nền: url ('img_navsprites.gif') -47px 0;} - Xác định hình nền 47px ở bên phải (#home width 46px + 1px chia dòng)
#next {left: 129px; width: 43px;} - Định vị 129px ở bên phải (bắt đầu của #prev là 63px + #prev width 43px + không gian thêm) và chiều rộng là 43px.
#next {nền: url ('img_navsprites.gif') -91px 0;} - Xác định hình nền 91px ở bên phải (#home width 46px + 1px chia dòng