html - 这个网页上的 "heart"是如何用 html/css/或其他什么完成的？

Question

我今天看到一个页面，其中有一些细节，我发现它非常整洁。

http://www.songkick.com/feedback

如果你看一下右上角，你会看到:

我试图检查元素，这是如何完成的，但我只得到这段代码:

<a href="/feedback">We <strong><span>love</span></strong> feedback</a>

神奇在哪里？我没有看到对心脏或其他图片的引用。心从何来？

Answer 1

打开Firebug .然后右键单击心脏图像并单击上下文菜单中的“检查元素”。

如果您在 Firebug 的 HTML 或 CSS View 中，那么在右侧的小 Pane 中，它将显示 CSS 规则，如下(从 Firebug 复制):

#header #header-nav ul #feedback strong {
    background-image: url("http://www2.sk-static.com/images/layout/heart-small.png?20110728085037");
    background-position: 0 2px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 10px;
    width: 10px;
}

所以，background-image是“心”。

快乐编码。

---

要回答“‘爱’去哪儿了？”，请单击 <span>love</love>在 HTML View 中(上面的方法没有选中它，大概是因为它被隐藏了):

#header #header-nav ul #feedback strong span {
    display: none;
}

Computed 选项卡也有助于查看实际应用的规则。