Hình ảnh CSS Sprites
Sprites hình ảnh
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 ra nhiều yêu cầu máy chủ.
Sử dụng sprite hình ảnh sẽ giảm số lượng yêu cầu máy chủ và tiết kiệm băng thông.
Sprites hình ảnh - 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 ta chỉ có thể hiển thị phần hình ảnh mà chúng ta 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ụ được giải thích:
<img id="home" src="img_trans.gif">- Chỉ định nghĩa một ảnh nhỏ trong suốt 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 tôi chỉ định trong CSSwidth: 46px; height: 44px;- Xác định phần hình ảnh chúng tôi muốn sử dụngbackground: url(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)
Đây là cách dễ nhất để sử dụng hình ảnh sprite, 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.
Sprites hình ảnh - 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 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ụ được giải thích:
- #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 định vị và tạo kiểu cho từng phần cụ thể:
- # nhà {left: 0px; width: 46px;} - Được định vị hết về phía bên trái và chiều rộng của hình ảnh là 46px
- #home {background: url (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 width 46px + thêm một số khoảng cách giữa các mục) và chiều rộng là 43px.
- #prev {background: url ('img_navsprites.gif') -47px 0;} - Xác định hình nền 47px ở bên phải (# home width 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 + #prev width 43px + extra space) và chiều rộng là 43px.
- #next {background: url ('img_navsprites.gif') -91px 0;} - Xác định hình nền 91px ở bên phải (# home width 46px + 1px line divider + #prev width 43px + 1px line divider)
Sprites hình ảnh - Hiệu ứng di chuột
Bây giờ chúng tôi muốn thêm hiệu ứng di chuột vào danh sách điều hướng của chúng tôi.
Mẹo: Bộ :hoverchọn có thể được sử dụng trên tất cả các phần tử, không chỉ trên các liên kết.
Hình ảnh mới của chúng tôi ("img_navsprites_hover.gif") chứa ba hình ảnh điều hướng và ba hình ảnh để sử dụng cho các hiệu ứng di chuột:
Bởi vì đây là một hình ảnh duy nhất, không phải sáu tệp riêng biệt, sẽ không có độ trễ khi tải khi người dùng di chuột qua hình ảnh.
Chúng tôi chỉ thêm ba dòng mã để thêm hiệu ứng di chuột:
Thí dụ
#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;
}
Ví dụ được giải thích:
- #home a: hover {background: url ('img_navsprites_hover.gif') 0 -45px;} - Đối với cả ba hình ảnh di chuột, chúng tôi chỉ định cùng một vị trí nền, chỉ 45px thêm xuống