Kỹ thuật dùng chung ảnh
Là 01 kỹ thuật gom nhiều ảnh vào trong 01 ảnh đơn.
01 trang web tải nhiều ảnh có thể mất nhiều thời gian và phải
gửi nhiều yêu cần đến máy chủ.
Sử dụng kỹ thuật dùng chung ảnh sẽ tiết kiệm được băng thông
và lệnh gửi đến máy chủ
Ví dụ dùng chung ảnh
Trong ví dụ sau thay vì dùng 03 ảnh chúng ta sẽ chỉ dùng 01 ảnh
duy nhất “img_navsprites.gif”
Với CSS, chúng ta có thể hiển thị chỉ phần ảnh mà ta cần.
Ví dụ:
#home
{
width: 46px;
height: 44px;
background:
url(img_navsprites.gif) 0 0;
}
Giải thích ví dụ:
Đầu tiên ta chèn 01 thẻ <img> trong phần <body>
<img
id="home" src="img_trans.gif"> đoạn mã này chỉ để chèn 01 tấm
hình trong suốt vì thuộc tính src không thể bỏ trống. Hình ảnh hiển thị thật
sự sẽ là hình trong thuộc tính background khai báo trong css.
width:
46px; height: 44px;
xác định phần ảnh chúng ta muốn dùng.
background:
url(img_navsprites.gif) 0 0;
xác định ảnh nền và vị trí của nó trong ảnh chung (left 0px, top
0px)
Đây là cách dễ nhất để dùng ảnh chung, bây giờ chúng ta mở rộng
ra phần chèn liên kết và hiệu ứng hover.
