如何製作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，改變高度，你會看到更多/更少的背景圖像的顯示。