代码之家 › 专栏 › 技术社区 › User

如何使一个CSS背景图像(精灵)可点击区域?

css-sprites youtube

0

User · 技术社区 · 16 年前

他们的标志实际上来自一个包含其他图形元素的大型主图像。但是你可以点击指向网站根的logo。我正在研究他们的HTML,但仍然不太确定他们是如何做到这一点的。

有人能看一看并解释一下吗?

2 回复 | 直到 16 年前

1

Ian Oxley 16 年前

它基本上只是一个背景图片链接中的按钮,但是它的宽度和高度被限制为只显示带有YouTube徽标的背景图片/精灵的部分。

从他们的CSS:

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

Firebug 并更改您将看到更多/更少背景图像显示的高度。

2

0

Ð¯egDwight kri 16 年前

从他们的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>