javascript - 如何混合像这样的 anchor 和背景图片?

标签 javascript css anchor background-image

我有一个关于HTML anchor 背景图片的问题,请看这里:

enter image description here

当我在firefox中调试这个网站时,我可以看到这个 anchor 的代码是

<div class="page">
    <div class="page__canvas">
        <div class="header-logo-account">
            <div class = "container">
                <div class = "header-logo-account__container">
                    <a class="header-logo-account__logo" href="http://envatomarketplaces.com/">
                        <span>Envato Marketplaces</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

负责任的 CSS 定义在哪里

.page {
    min-width: 984px;            
}
.page__canvas {
    position: relative;
    z-index: 2;
    min-height: 100%;
    background-color: yellow;

}
.header-logo-account {
    background-color: #232323;
    height: 48px;
    position: relative;
}

.container {
    margin: 0px auto;
    width: 984px;
}

.header-logo-account__container {
    position: relative;

}
.header-logo-account__logo {
    position: absolute;
    height: 48px;
}

我不能理解的是:css定义没有任何背景图片设置,但在结果中,显然anchor是用图片固定的。当我在本地机器上运行上面的代码时,最终结果是:

enter image description here

我的结果和原来的有很大的不同,为什么?

现在我猜可能是因为页面加载时有一些 js 脚本,但我不确定,即使我的猜测是正确的,我也找不到哪个 js 文件执行此操作,有人可以帮我解决吗?

最佳答案

背景图像设置为 anchor 内的跨度,而不是实际 anchor 上的范围

取自他们的 css 文件:

.svg .header-logo-account__logo>span {
background: url(http://2.envato-static.com/assets/logos/envato_marketplaces-e40d7704e9b725cd1e541878ccdb45b0.svg);
background-size: 192px 16px;

关于javascript - 如何混合像这样的 anchor 和背景图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22137736/

相关文章:

javascript - 使用 w3.css 自动打开模态

javascript - 突出显示和取消突出显示在 jquery 中选择的元素

javascript - Eclipse 的 JSDT 发生了什么?

html - 无法完全收缩包裹并居中元素

javascript - 通过使用 jQuery 重新排序元素来模拟 CSS Column 垂直内容流?

css - anchor 标签不占用 safari 上的文本宽度

javascript - anchor 标记的点击事件正在触发,但默认没有

javascript - 是否可以在加载 jQuery 之前预先注册处理程序?

javascript - Jquery 图像 slider 自动播放

javascript - Bootstrap 导航悬停