CSS Image Sprites

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    8 thg 11, 2022

  • Số lượt xem

    264 lượt xem


CSS Image Sprites là việc chỉ sử dụng một hình ảnh cho nhiều hình ảnh khác nhau. Việc này sẽ làm giảm số lượng request đến server, do đó tăng hiệu năng website.

Ví dụ đơn giản về Image Sprites

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 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ị:

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

Giải thích ví dụ:

  • <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 mà chúng tôi chỉ định trong CSS
  • width: 46px; height: 44px; - Xác định phần hình ảnh mà chúng tôi muốn lấy
  • background: url(img_navsprites.gif) 0 0; - Xác định hình nền và vị trí của nó (left 0px, top 0px)

Image Sprites - Tạo một Navigation List

Chúng tôi muốn sử dụng image sprite ("img_navsprites.gif") để tạo navigation list.

Chúng tôi sẽ sử dụng HTML list, vì nó có thể là một link và cũng hỗ trợ 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;    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;  }

Giải thích ví dụ:

  • #navlist {position:relative;} - position có giá trị là relative để sử dụng position absolute bên trong nó
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin và padding được set về 0, list-style bị xoá, và tất cả list item đều có position absolute
  • #navlist li, #navlist a {height:44px;display:block;} - chiều cao của 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;} - đẩy vị trí qua bên trái, và chiều cao hình ảnh là 46px
  • #home {background:url(img_navsprites.gif) 0 0;} - khai báo background image và vị trí (left 0px, top 0px)
  • #prev {left:63px;width:43px;} - vị trí là 63px bên phải (#home rộng 46px + không gian thừa), và rộng 43px
  • #prev {background:url('img_navsprites.gif') -47px 0;} - khai báo background image 47px bên phải (#home rộng 46px + 1px đường chia)
  • #next {left:129px;width:43px;} - vị trí 129px bên phải (bắt đầu của #prev là 63px + #prev rộng 43px + không gian thừa), và rộng là 43px
  • #next {background:url('img_navsprites.gif') -91px 0;} - khai báo background image 91px bên phải (#home rộng 46px + 1px đường chia + #prev rộng 43px + 1px đường chia)

Image Sprites - Hover Effect

Bây giờ chúng tôi muốn thêm hiệu ứng di chuột vào naviagation list của chúng tôi.

Bởi vì đây là một hình ảnh duy nhất, không phải sáu tệp riêng biệt, 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 code để thêm hiệu ứng di chuột:

#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: url('img_navsprites_hover.gif') 0 -45px;} - Đối với cả ba hình ảnh, chúng tôi chỉ định cùng một vị trí nền, chỉ xuống 45px nữa

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.