Hình ảnh CSS
Hình ảnh
Hình ảnh sprite là tập hợp các hình ảnh được ghép 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 image sprite 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 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 một 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ị:
Ví dụ
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
} Hãy tự mình thử »Ví dụ giải thích:
-
<img id="home" src="img_trans.gif">- Chỉ xác định một hình ả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 chúng ta chỉ định trong CSS -
width: 46px; height: 44px;- Xác định phần hình ảnh chúng ta 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ó (0px bên trái, 0px trên cùng)
Đâ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 nền:
Ví 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;
}
Hãy tự mình thử »Ví dụ 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:absolute;top:0;}- lề và phần đệm được đặt thành 0, kiểu danh sách bị xóa 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ờ hãy bắt đầu định vị và tạo kiểu cho từng phần cụ thể:
-
#home {left:0px;width:46px;}- Được đặt hoàn toàn về 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ó (0px bên trái, 0px trên cùng) -
#prev {left:63px;width:43px;}- Được đặt 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 {background:url('img_navsprites.gif') -47px 0;}- Xác định hình nền 47px ở bên phải (#home width 46px + 1px bộ chia dòng) -
#next {left:129px;width:43px;}- Vị trí 129px ở bên phải (bắt đầu #prev là 63px + #prev chiều rộng 43px + khoảng trắng thừa) 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)
Hình ảnh Sprites - 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 mình.
Mẹo: Bộ chọn :hover có thể được sử dụng trên tất cả các thành phần, 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 hiệu ứng di chuột:
Vì đây là một hình ảnh duy nhất chứ không phải sáu tệp riêng biệt nên sẽ không có độ trễ 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:
Ví 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;
} Hãy tự mình thử »Ví dụ 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ỉ cách xa hơn 45px
