css - Firefox 中的 SVG CSS 内容

Question

我网页的 CSS 中有 SVG 图标。它们在 Chrome 和 Safari 中显示并响应，但在 Firefox 中根本不显示。我使用 content:url 链接到 SVG 的方式有问题吗？是否有解决方法？

CSS:

    #about-linked{
      content:url('./info.svg');
      position: absolute;
      background-color: rgba(24, 24, 24, 0.0);
      z-index: 10;
      border-radius: 5px;
      bottom: 1%;
      left: 1%;
      height: 35px;
      width: 35px;
      opacity: 0.7;
      display: none
    }

    #about-linked:hover{
      cursor: pointer;
      opacity: 0.9;
  }

#changeLayer{
  content:url(https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-1/16/5049-512.png);
    position: absolute;
  background-color: rgba(24, 24, 24, 0.0);
  z-index: 3;
  border-radius: 5px;
    top: 10%;
  left: 26%;
    height: 35px;
  width: 35px;
    opacity: 0.7;
}

HTML:

  <div id='map'>
    <div id='program_title'>
        <span id="myspan">TITLE</span>
    </div>

    <div id ='about-linked'></div>
  </div>

<div id='changeLayer'></div>

注意:将 content 更改为 background-image 会产生与图标相反的不良模式:例如(在 Chrome 中)content:，我得到:

但使用 background-image: 我得到:

Answer 1

content 仅适用于 ::before 和 ::after 伪元素。其他浏览器可能支持它，但那是 against official documentation .

好消息是您唯一需要做的改变是:

#changeLayer::before{
    ...