Firefox 不显示徽标，而 Chrome 显示

Question

我有以下css：

 #logo{
    content: url(../images/logo.svg) 0 0 no-repeat;
    background-color: black;
    margin-top: 30px;
    height: 20px;
    width: 100px;
  }
  #logo-container{
    background-color: black;
    margin-top: 0px;
    height: 65px;
    width: 100px;
  }

使用该 html：

<div class="col-md-1 col-md-offset-1 col-xs-3 ">
                <div id="logo-container"><a id="logo" href="#firstpage" data-target="start" title="EPIC Companies"></a></div>  
            </div>

Chrome 正确显示徽标，而 Firefox 显示黑色矩形（仅容器）。我做错了什么？

Answer 1

Firefox 对content 属性的支持有限，具体来说，它不能用于图像。

您可能必须使用<img> 标签。

编辑：根据链接的重复问题，如果您将它与 :before 和 :after 伪属性一起使用，它看起来实际上可以在 Firefox 中工作。

Answer 2

content 只能用于:after 或:before 等伪元素中。

所以这样使用：

#logo:after {
    content: url(../images/logo.svg) 0 0 no-repeat;
    background-color: black;
    margin-top: 30px;
    height: 20px;
    width: 100px;
}