如何在HTML中使用背景图片代替IMG标签？

Question

I have the following HTML with many of these kinds of links:

<a class="button" id="menu">
   <img width="16" height="16" src="/Images/control-double.png">
</a>

I created a sprite for these with all the images combined using

spritegen

But when I look at this it seems like it's just for background as it gives an example:

.sprite-control-double{ background-position: 0 -396px; width: 16px; height: 16px; } 
#container li {
    background: url(csg-4febd28fe3aa3.png) no-repeat top left;
}

How can I use a sprite with positioning for an image instead of a single image?

Answer 1

If you use the "sprite" technique, then you don't need IMG elements within your anchors:

a.button {
    background-color: transparent;
    background-image: url(/Images/control-double.png);
    background-position: 0 -396px;
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
}

I added the background-color style because in some browsers the rendering engine will not show a background image if there is no background color.

Answer 2

Yes you can. That's how sprites work, they're applied as the background for an element with its overflow set to hidden.

You should remove the <img> tag entirely and rely on the background of the <a> tag. The purpose of the sprite is to replace the need for non-semantic <img> tags.

Answer 3

从spritegens帮助页面链接的文章中对此进行了很好的介绍： http : //www.alistapart.com/articles/sprites