可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I read somewhere that css sprites are better than using simple images. How is that ? also I am new to Html so can anyone tell me how css works and give me a simple example for css sprites?

回答1:

Here is the complete code. Copy and paste in a notepad and save it as abc.html. Save the two images below in the same folder as: image.gif for big one and trans.gif for small one.

<html>
<head>
    <title>Image Sprites</title>
    <style type="text/css">
        img.sprite
        {
            width:46px;
            height:44px;
            background:url(image.gif) 0px 0px;
        }        

        .sprite:hover
        {
            background: url(image.gif) 0px 44px;
        }
     </style>
</head>

<body>
    <img class="sprite" src="trans.gif" />
</body>
</html>

image.gif on imgur
trans.gif on imgur (1x1 pixels)

In simple words, CSS sprites use only one image instead of many. So instead of many image requests from server only a single request is sent.

回答2:

One trip to the server to get the images vs. multiple ones. I found SpritePad (online app) for building them, it will also generate the relevant boiler plate css (which can be a bit messy if your're starting out).

回答3:

In basic terms - it allows you to load one image and use the said image on various elements around your page. Leading to less load requests and possibly load times.

Here's an example: http://www.thedotproduct.org/experiments/css-sprites/

and here is the sprite image used: http://www.thedotproduct.org/experiments/css-sprites/css-sprites-menu.jpg