这个 <img> 标签是怎么回事？ [复制]答案

【问题标题】：What is going on with this <img> tag? [duplicate]这个 <img> 标签是怎么回事？ [复制]
【发布时间】：2016-03-25 14:34:53
【问题描述】：

当我遇到我真正喜欢的网站时，我经常查看他们的页面来源，看看我是否可以学习任何新的网络技巧。我遇到了TopTal's site，在查看他们如何导入其主要徽标的<img/> 标签（首页顶部+左侧）时，我很惊讶地看到：

<div class="page_header_top-logotype"> = $0
    <a class="logo is-big is-link for- " href="http://www.toptal.com"></a>
</div>

Ba-ba-bwhat?!?!

实际的徽标（图片或<img/> 标签）在哪里？！？！
= $0 到底是什么鬼？！？！

我是否遗漏了一些明显的东西，或者这是从一些自定义 webfont/事物中提取图像的巧妙技巧？

【问题讨论】：

它叫CSS，你其实可以在里面给元素添加背景图片！
谢谢@adeneo (+1) - 这个技巧在 CSS 领域有名字吗？如果你能解释它并给出一个包含这个技巧的教程的链接，我很乐意给你绿色检查！
相当基本的 CSS w3schools.com/css/css_background.asp
更有趣的是，
= $0 是什么意思。另一部分只是在css中使用背景（stackoverflow.com/questions/492809/…）
无论如何，它只是基于OP的div中的内容，没有任何意义。

标签： javascript html image

【解决方案1】：

正如评论者所说，标志是通过 CSS 设置的，特别是……这条规则。

.logo.is-link {
    transition-duration: 200ms;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: transform, opacity;
    display: inline-block;
    opacity: 0.9;
}
.logo.is-big {
    width: 105px;
    height: 35px;
    background-image: url("//assets.toptal.io/assets/public/blocks/logo/big-21c32f3cb60e0b8cf3c514a8fc5fd905.png");
    background-size: 105px 35px;
    background-repeat: no-repeat;
}

第一个类应用 display: inline-block;，它允许您设置尺寸，第二个类设置 TopTal 使用的实际背景图像。

请看this StackOverflow discussion for more information about when to use img vs when to use css background-image.

【讨论】：

我认为你需要让锚标签显示：block
jsfiddle.net/f0ykqtu6/1
谢谢@Toni W (+1) - 知道= $0 吗？另外，什么时候有人会使用这些“CSS 背景”，为什么？它们对浏览器是否更有效？
我实际上没有在任何地方的源代码中看到它。您是如何查看源代码的？

【解决方案2】：

这不是技巧，它只是使用 CSS 的基本样式

<a class="logo is-big is-link for- " href="http://www.toptal.com"></a>

<style type="css/text"> // or in a .css file
    .logo.is-big {background-image : url("someimage.jpg")}
</style>

【讨论】：

谢谢@adeneo (+1) - 知道= $0吗？
= $0 没有显示给我，也没有做任何事情。
= $0 是在某些浏览器的 DOM 调试器中出现的东西。我不确定它的含义，但它实际上并不是页面的一部分。