“这是怎么回事?”;“心”;在这个网页上用html/css/或者其他什么来完成?

“这是怎么回事?”;“心”;在这个网页上用html/css/或者其他什么来完成?,html,css,Html,Css,我今天看到一个页面,里面有一点细节,我觉得非常整洁 如果您查看右上角,您会看到: 我试图检查元素,了解如何完成,我只得到以下代码: <a href="/feedback">We <strong><span>love</span></strong> feedback</a> 魔法在哪里?我看不到关于心脏或其他东西的图片。心脏从何而来?标签有以下CSS:背景图像:url(http://www2.sk-static.co

我今天看到一个页面,里面有一点细节,我觉得非常整洁

如果您查看右上角,您会看到:

我试图检查元素,了解如何完成,我只得到以下代码:

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


魔法在哪里?我看不到关于心脏或其他东西的图片。心脏从何而来?

标签有以下CSS:
背景图像:url(http://www2.sk-static.com/images/layout/heart-small.png?20110728085037);
,根据CSS规则应用:
#标题导航ul#强烈反馈
:)

使用firebug,这是他们CSS中的图像

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

如果您在Firebug的HTML或CSS视图中,那么在右侧的小窗格中,它将显示CSS规则,如下所示(从Firebug复制):

因此,
背景图像
就是“心脏”

快乐编码


要回答“love去了哪里?”,请单击HTML视图中的
love
(上面的方法没有选择它,大概是因为它是隐藏的):

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

#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;
}
#header #header-nav ul #feedback strong span {
    display: none;
}