html - 在链接上放置背景并使其具有可扩展性

Question

我正在尝试以mobile-first 方式设置我的布局。橙色区域here我有一个与 class="logo" 的链接。但由于某种原因， Logo 根本没有出现。

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 bg bg-blue"></div>
    </div>
    <div class="row">
        <div class="col-xs-12 bg bg-orange">
                <a href="/" class="logo">test</a>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 bg bg-white"></div>
    </div>
    <div class="row">
        <div class="col-xs-12 bg efrat"></div>
    </div>
</div>

和一些相关的CSS

.bg-orange {
  position: absolute;
  top: 3%;
  background-color: #f7942e;
  height: 25%;
}
.bg-orange a.logo {
  background: url(//placehold.it/480X91) no-repeat center;
  text-indent: -9999px;
  display: inline-block;
  max-width: 100%;
}

完整示例请参见:here

我怎样才能做到这一点？

谢谢

Answer 1

您需要向我们展示您的一些代码……但仅此而已。您还必须为背景显示一个 as block 或类似的东西:url 工作。