CSS Gộp ảnh

0
8

Gộp ảnh

Gộp ả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 Gộp ảnh sẽ giảm số lượng yêu cầu máy chủ và tiết kiệm băng thông.

Ví dụ cơ bả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 tôi chỉ có thể hiển thị phần hình ảnh mà chúng tôi 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ị:

<style>
#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

#next {
  width: 43px;
  height: 44px;
  background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>

<img id="home" src="img_trans.gif" width="1" height="1"><br><br>
<img id="next" src="img_trans.gif" width="1" height="1">

</body>

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:

<style>
#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;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>

Hiệu ứng hover

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: The :hover selector 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 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ễ 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:

<style>
#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_hover.gif') 0 0;
}

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

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

#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;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây