Hình sprit trong CSS

Hình sprite

Một hình ảnh sprite là một tập hợp các hình đưa vào một hình ảnh duy nhấ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 của máy chủ. Sử dụng hình ảnh sprites sẽ giảm số yêu cầu của máy chủ và tiết kiệm băng thông.

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

Thay vì sử dụng ba hình ảnh riêng biệt, sử dụng hình ảnh đơn này (“img_navsprites.gif”):

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

#home {
    awidth: 46px;
    height: 44px;
    background: url(img_navsprites.gif) 0 0;
}

Giải thích ví dụ:

• <img id=”home” src=”img_trans.gif”> – Chỉ định nghĩa một hình ảnh nhỏ trong suốt vì thuộc tính src không thể để trống. Hình ảnh được hiển thị sẽ là hình nền chỉ định trong CSS.
• awidth: 46px; height: 44px; – Xác định phần hình ảnh 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ó (trái 0px, trên cùng 0px)

Đây là cách dễ dàng nhất để sử dụng hình ảnh sprit, dưới đây sẽ là mở rộng nó bằng cách sử dụng các liên kết và hover hiệu ứng.

Hình ảnh sprit – Tạo danh mục điều hướng

Sử dụng một danh sách HTML, bởi vì nó có thể là một liên kết và cũng hỗ trợ một hì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;
    awidth: 46px;
    background: url('img_navsprites.gif') 0 0;
}

#prev {
    left: 63px;
    awidth: 43px;
    background: url('img_navsprites.gif') -47px 0;
}

#next {
    left: 129px;
    awidth: 43px;
    background: url('img_navsprites.gif') -91px 0;
}

Giải thích ví dụ:

• #navlist {position:relative;} – vị trí được đặt tương đối cho phép đặt vị trí tuyệt đối bên trong nó
• #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} –  margin và padding được đặt thành 0, list-style bị xóa, và tất cả các danh sách đều nằm trong 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

Sau đây là vị trí và phong cách cho từng phần cụ thể:

• #home {left:0px;awidth:46px;} – Vị trí tất cả các 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í (trái 0px, trên cùng 0px)
• #prev {left:63px;awidth:43px;} – Vị trí 63px ở bên phải (#home rộng 46px + một số khoảng trống 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 chiều rộng 46px + dòng kẻ chia 1px)
• #next {left:129px;awidth:43px;} – Được định vị 129px ở bên phải (bắt đầu #prev là 63px + #prev rộng 43px + không gian phụ) 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 chiều rộng 46px + 1px divider + #prev awidth 43px + 1px divider)

Hình ảnh sprite – hiệu ứng hover

Ví dụ khi thêm hiệu ứng di chuột vào danh sách điều hướng. Mẹo: bộ chọn :hover 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 (“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:

Bởi vì đây là một ảnh duy nhất, chứ không phải sáu tệp riêng biệt, sẽ không có sự chậm trễ khi người dùng di chuột qua hình ảnh. Thêm ba dòng mã để thêm hiệu ứng hover:

#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;
}

Giải thích ví dụ:

• #home a:hover {background: transparent url(‘img_navsprites_hover.gif’) 0 -45px;} – Đối với tất cả ba hình hover chúng ta chỉ định vị trí nền tương tự, chỉ còn -45px