Chủ Nhật, 29 tháng 12, 2013

CSS Image Sprites


Sprites hình ảnh

Một ma hình ảnh là một bộ sưu tập các hình ảnh đưa vào một hình ảnh duy nhất.

Một trang web với nhiều hình ảnh có thể mất một thời gian để tải và tạo ra nhiều yêu cầu máy chủ.

Sử dụng họa tiết hình ảnh sẽ giảm số lượng các yêu cầu máy chủ và tiết kiệm băng thông.

Sprites hình ảnh - 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 hình ảnh duy nhất này ("img_navsprites.gif"):

hình ảnh chuyển hướng

Với CSS, chúng ta có thể thấy chỉ là một phần của hình ảnh chúng ta cần.

Trong ví dụ sau CSS quy định cụ thể đó là một phần của "img_navsprites.gif" hình ảnh để hiển thị:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
img.next
{
width:43px;
height:44px;
background:url(img_navsprites.gif) -91px 0;
}
</style>
</head>

<body>
<img class="home" src="img_trans.gif">
<br><br>
<img class="next" src="img_trans.gif">
</body>
</html>


Thử nó cho mình »

Ví dụ giải thích:
  • <img class="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 hiển thị sẽ là hình ảnh nền chúng tôi chỉ định trong CSS
  • chiều rộng: 46px; height: 44px; - Xác định các phần của hình ảnh chúng tôi 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 trái, đầu 0px)
Đây là cách dễ nhất để sử dụng 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à di chuột hiệu ứng.

Sprites hình ảnh - Tạo một danh sách mục chính

Chúng tôi muốn sử dụng hình ảnh ma ("img_navsprites.gif") để tạo ra một danh sách điều hướng.
Chúng tôi sẽ 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:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<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;}
#home{background:url('img_navsprites.gif') 0 0;}

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

#next{left:129px;width:43px;}
#next{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>
</html>


Thử nó cho mình »

Ví dụ giải thích:
  • # Navlist {vị trí: tương đối;} - vị trí được thiết lập để cho phép so với vị trí tuyệt đối bên trong nó
  • # Navlist li {margin: 0; padding: 0; list-style: none; vị trí: tuyệt đối; top: 0;} - margin và padding được thiết lập là 0, danh sách theo phong cách được lấy ra, và tất cả các mục trong danh sách là tuyệt đối vị trí
  • # Navlist li, # navlist một {height: 44px; display: block;} - chiều cao của tất cả các hình ảnh được 44px
Bây giờ bắt đầu vào vị trí và phong cách cho từng phần cụ thể:
  • # Nhà {left: 0px; width: 46px;} - Nằm tất cả các cách bên trái, và chiều rộng của hình ảnh là 46px
  • # Nhà {background: url (img_navsprites.gif) 0 0;} - Xác định hình nền và vị trí của nó (0px trái, đầu 0px)
  • # Trước {left: 63px; width: 43px;} - 63px Nằm bên phải (# nhà rộng 46px + một số không gian thêm giữa các mục), và chiều rộng là 43px.
  • # Trước {background: url ('img_navsprites.gif')-47px 0;} - Định nghĩa hình ảnh 47px nền bên phải (chiều rộng # nhà 46px + 1px dòng chia)
  • # Tiếp theo {left: 129px; width: 43px;} - Nằm 129px bên phải (bắt đầu # trước là 63px + # trước rộng 43px + thêm không gian), và chiều rộng là 43px.
  • # Tiếp theo {background: url ('img_navsprites.gif')-91px 0;} - Định nghĩa hình ảnh 91px nền bên phải (chiều rộng # nhà 46px 1px + đường + # chia chiều rộng trước 43px + 1px dòng chia)

Sprites hình ảnh - Di chuột Effect

Bây giờ chúng tôi muốn thêm một hiệu ứng di chuột vào danh sách chuyển hướng của chúng tôi.

GhiCác: hover chọn được sử dụng để lựa chọn các yếu tố khi bạn đưa chuột qua chúng. 

Mẹo: Các: hover chọn có thể được sử dụng trên tất cả các yếu 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") có ba hình ảnh chuyển hướng và ba hình ảnh để sử dụng cho hiệu ứng chuyển động:

hình ảnh chuyển hướng

Bởi vì đây là một hình ảnh duy nhất, và không sáu tập tin riêng biệt, sẽ có sự chậm trễ không tải khi người dùng di chuyển lên hình ảnh.

Chúng ta chỉ thêm ba dòng mã để thêm các hiệu ứng di chuột:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<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;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

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

#next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#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>
</html>


Thử nó cho mình »

Ví dụ giải thích:
  • # Nhà: hover {background: transparent url (img_navsprites_hover.gif) 0-45px;} - Đối với tất cả ba hình ảnh di chuột, chúng tôi xác định vị trí nền giống nhau, chỉ 45px tiếp tục xuống
Người đăng: vào lúc
Nhãn: ,
Các tin khác

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)