Tệp hình ảnh duy nhất để lưu trữ tất cả hình ảnh nhỏ trên một trang

Question

Trong một trong số Podcast Stackoverflow gần đây, Jeff đã nói về việc có một tệp hình ảnh duy nhất có tất cả những hình ảnh nhỏ trên tất cả các trang và sau đó cắt CSS để tất cả hình ảnh được hiển thị chính xác. Toàn bộ vấn đề là giảm số lượng yêu cầu máy chủ để trang được tải nhanh hơn. Tôi giống như "wow, điều đó thực sự tuyệt vời, tôi thực sự có thể sử dụng nó trong sản phẩm của chúng tôi".

Câu hỏi của tôi là: Điều này được thực hiện với CSS như thế nào? Tôi cần tải hình ảnh với hình nền, nhưng làm cách nào để chỉ định độ lệch của hình ảnh phụ trong hình ảnh lớn? Đó là, giả sử rằng có một biểu tượng búa trong hình ảnh lớn tại (50px, 50px) và nó có kích thước 32px * 32px, làm cách nào để buộc trình duyệt chỉ hiển thị bit đó?

Answer 1

Về cơ bản bạn sử dụng hình ảnh duy nhất của bạn như hình nền, nhưng di chuyển nó đi (sang trái trở lên) bằng cách bù đắp của hình ảnh bạn muốn hiển thị. Ví dụ. để hiển thị biểu tượng búa:

.hammer 
{ 
    background: transparent url(myIcons.jpg) -50px -50px no-repeat; 
} 

Nhưng theo như tôi biết, bạn phải đảm bảo rằng phần tử sử dụng hình nền có kích thước chính xác (ví dụ: 32x32 px).

Tìm kiếm CSS Sprites sẽ cung cấp cho bạn thêm thông tin.

Answer 2

Nó được gọi là css sprites. Về cơ bản, tôi là một mẹo cũ được sử dụng trong lập trình trò chơi, nơi bạn tải một bitmap duy nhất chứa tất cả "trạng thái" của một số mục bạn cần vẽ, lợi thế là cách này ảnh được tải trước và không có sự chậm trễ khi bạn cần để thực sự sử dụng nó, trong trường hợp của css, nó thường được thực hiện bằng cách sử dụng hình ảnh làm nền cho phần tử, và áp dụng các offset và giới hạn khác nhau: hover,: active và "normal" classes.

Có thông tin ở những stackoverflow Blog

Dưới đây là một máy phát điện tốt đẹp: http://www.csssprites.com/

Answer 3

Bạn biết câu trả lời ... hỏi google trong trường hợp này xem xét các nguồn của trang kết quả tìm kiếm google, với một công cụ như con đom đóm và bạn sẽ tìm thấy

.w10 
background-position:-152px 0; 
} 
.w10, .w11, .w20, .w21, .w24, .wci, .wpb 
background:transparent url(/images/nav_logo4.png) no-repeat scroll 0 0; 
border:0 none; 
cursor:pointer; 
height:16px; 
margin-left:8px; 
vertical-align:bottom; 
width:16px; 
} 

Vì vậy, tất cả W10, W11, W20 vv chia sẻ cùng một hình ảnh (nav_logo4.png) tất cả đều có chiều cao cố định và chiều rộng. và tất cả chỉ định (khác nhau) backgroup-position's.