单个图像文件存储页面上的所有小图像 [英] Single image file to store all the little images on a page

问题描述

在最近的 Stackoverflow播客之一中，Jeff谈到了一个图像文件，其中所有这些微小的图像都在一个页面上，然后用CSS切割，使所有的图像显示正确。总的来说是减少服务器请求的数量，以便页面加载更快。

In one of the recent Stackoverflow podcasts, Jeff talked about having a single image file having all of those tiny images that are all over a page and then cutting it with CSS so that all the images get displayed correctly. The whole point is to reduce the number of server requests so that the page gets loaded faster. I was like "wow, that's really cool, I could really use this in our product".

我的问题是：这是怎么做的CSS？

My question is: How is this done with CSS? I need to load the images with background-image, but then how do I specify the offset of the sub-image in the large image? That is, suppose that there is a hammer icon in the large image at (50px, 50px) and it has a size of 32px * 32px, how can I force the browser to only display that bit?

推荐答案

基本上，您使用单个图像作为背景图像，但将其移动（向左和向上）您要显示的图像的偏移。例如。显示锤子图标：

Basically you use your single image as the background image, but move it off (to the left and up) by the offset of the image you want to display. E.g. to display the hammer icon:

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

但据我所知，你必须确保使用背景图片具有正确的大小（例如32x32像素）。

But as far as I know, you have to make sure that the element that's using the background image has the correct size (e.g. 32x32 px).

搜索CSS Sprites会为您提供更多信息。

A search for CSS Sprites will give you more information.

这篇关于单个图像文件存储页面上的所有小图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！