Question

以YouTube为例。

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

任何人都可以看一下并解释一下吗？

Answer 1

它基本上只是一个带有背景图像的链接内部按钮，但是它的宽度和高度仅限于显示带有YouTube徽标的背景图像/精灵部分。

来自他们的CSS：

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

如果您在Firebug中加载它并更改高度，您会看到更多/更少的背景图像出现。

Answer 2

来自他们的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>

如何将CSS背景图像（精灵）制作成可点击区域？

2 个答案: