Hình ảnh精灵 CSS
- Trang trước Thư viện hình CSS
- Trang tiếp theo Chọn phần tử thuộc tính CSS
Hình ảnh精灵
Hình ảnh精灵 là tập hợp các hình ảnh được chứa trong một hình ảnh duy nhất.
Trang web chứa nhiều hình ảnh có thể cần thời gian lâu để tải và sẽ tạo ra nhiều yêu cầu máy chủ.
Sử dụng 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.
Hình ảnh精灵 - Ví dụ đơn giản
Chúng ta sử dụng hình ảnh đơn幅("navsprites.gif") thay vì sử dụng ba hình ảnh riêng lẻ:
Bằng cách sử dụng CSS, chúng ta có thể chỉ hiển thị phần nào của hình ảnh cần thiết.
Trong ví dụ dưới đây, CSS chỉ định phần nào của hình ảnh "navsprites.gif" được hiển thị:
mô hình
#home {
width: 46px;
height: 44px;
background: url(navsprites.gif) 0 0;
}
Giải thích ví dụ:
<img id="home" src="trans.gif">- Chỉ định hình ảnh trong suốt nhỏ, vì thuộc tính src không thể để trống. Hình ảnh thực sự hiển thị sẽ là hình ảnh nền được chúng ta chỉ định trong CSS.width: 46px; height: 44px;- Định nghĩa phần hình ảnh mà chúng ta sẽ sử dụngbackground: url(navsprites.gif) 0 0;- Định nghĩa hình ảnh nền và vị trí (left 0px, top 0px)
Hình ảnh精灵 - Tạo danh sách điều hướng
Chúng ta muốn sử dụng hình ảnh精灵("navsprites.gif") để tạo danh sách điều hướng.
Chúng ta sẽ sử dụng danh sách HTML vì nó có thể là liên kết,同时还 hỗ trợ hình nền:
mô hình
#navlist {
tọa độ: tĩnh;
}
#navlist li {
margin: 0;
padding: 0;
danh sách: không;
tọa độ: tuyệt đối;
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;
}
Giải thích ví dụ:
- #navlist {tọa độ: tĩnh;} - Đặt vị trí tĩnh để cho phép định vị tuyệt đối trong đó
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - Thiết lập margin và padding thành 0, xóa list-style và tất cả các mục danh sách đều là vị trí tuyệt đối
- #navlist li, #navlist a {height:44px;display:block;} - Tất cả các ảnh có chiều cao là 44px
bây giờ bắt đầu thiết lập vị trí và phong cách cho từng phần đặc biệt:
- #home {left:0px;width:46px;} - Định vị sang trái liên tục, chiều rộng của ảnh 46px
- #home {background:url(navsprites.gif) 0 0;} - Định nghĩa ảnh nền và vị trí (left 0px, top 0px)
- #prev {left:63px;width:43px;} - Định vị sang phải 63px (#home chiều rộng 46px + không gian trống thêm giữa các mục)
- #prev {background:url('navsprites.gif') -47px 0;} - Định nghĩa ảnh nền di chuyển sang phải 47px (#home chiều rộng 46px + 1px đường ranh giới)
- #next {left:129px;width:43px;} - Định vị sang phải 129px (#prev bắt đầu là 63px + chiều rộng của #prev là 43px + không gian trống dư)
- #next {background:url('navsprites.gif') -91px 0;} - Định nghĩa ảnh nền di chuyển sang phải 91px (#home chiều rộng 46px + 1px đường ranh giới + #prev chiều rộng 43px + 1px đường ranh giới)
image sprite - hiệu ứng hover
bây giờ, chúng ta sẽ thêm hiệu ứng hover vào danh sách hướng dẫn.
lưu ý::hover selector có thể được sử dụng cho tất cả các yếu tố, không chỉ giới hạn trong liên kết.
ảnh mới của chúng ta ("navsprites_hover.gif") chứa ba ảnh hướng dẫn và ba ảnh để đạt được hiệu ứng hover:
vì đây là một bức ảnh,而不是 sáu tệp riêng lẻ,do đó khi người dùng đặt con trỏ chuột trên ảnh,không có sự chậm trễ trong việc tải。
chúng ta chỉ cần thêm ba dòng mã để đạt được hiệu ứng hover:
mô hình
#home a:hover {
background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
background: url('navsprites_hover.gif') -91px -45px;
}
Giải thích ví dụ:
#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Chúng tôi chỉ định cùng một vị trí nền cho tất cả ba hình ảnh trượt, chỉ di chuyển xuống 45 pixel
- Trang trước Thư viện hình CSS
- Trang tiếp theo Chọn phần tử thuộc tính CSS
