如何制作CSS背景图片（精灵）到可点击区域？

Question

以YouTube为例。

他们的标志实际上来自包含其他图形元素的大主图像。但是，您可以点击指向网站根目录的徽标。我正在研究他们的HTML，但仍不太确定他们是如何实现这一点的。

任何人都可以看看它，也许解释它？

Answer 1

从他们的HTML源代码：

<a href="/" onmousedown="urchinTracker('/Events/Header_3/YouTubeLogo');" id="logo"><button onclick="window.top.location.href='/'; return false;" class="master-sprite" title=""></button></a> 

Answer 2

它基本上只是里面有一个背景图片链接按钮，但它的宽度和高度的限制，只显示背景图片/精灵与YouTube标志的部分。

从他们的CSS：

#masthead #logo button { 
    background-position:0 0; 
    height:33px; 
    width:84px; 
} 

如果加载它在Firebug，改变高度，你会看到更多/更少的背景图像的显示。