html - Firefox 不显示 Logo ，而 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 正确显示 Logo ，而 Firefox 显示黑色矩形(仅容器)。我做错了什么？

Answer 1

content 只能用在伪元素中，例如 :after 或 :before。

所以这样使用它:

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