CSS背景画像（スプライト）をクリック可能な領域にするには？

Question

YouTubeの例です。

実際には、他のグラフィック要素を含む大きなマスターイメージからロゴが表示されます。ただし、サイトのルートを指すロゴをクリックすることはできます。私は彼らのHTMLを研究していますが、それがどのように達成されたかについてまだよく分かりません。

誰でもそれを見て、それを説明してもらえますか？そのHTMLソースから

Answer 1

：

<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でそれをロードし、あなたがより多くを見ることができます高さを変更した場合/背景画像のあまりが表示されます。