Question

当我遇到我非常喜欢的网站时，我经常会查看他们的网页来源，看看我是否可以学习任何新的网络技巧。我遇到了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 / thing中提取图像的聪明技巧？

Answer 1

这不是一个技巧，它只是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>

Answer 2

与评论者说的一样，徽标是通过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.

这个<img/>代码发生了什么变化？

2 个答案: