这个网页上的“心脏”是如何在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视图中，则在右侧的小窗格中将显示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是“心脏”。

快乐的编码。

---

要回答“爱情去哪儿了？”，请点击HTML视图中的<span>love</love>（上述方法未选中，大概是因为它被隐藏了）：

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

“计算”选项卡也有助于查看实际应用的规则。

Answer 2

<strong>代码包含此CSS：background-image: url(http://www2.sk-static.com/images/layout/heart-small.png?20110728085037);，已应用于此CSS规则：#header-nav ul #feedback strong：）

Answer 3

使用萤火虫，它是css中的图像。

http://www2.sk-static.com/images/layout/heart-small.png?20110728085037