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产生和相对于一个图标不期望的图案：具有content:例如（在Chrome），I得到：

但background-image:我得到：

Answer 1

content只有::before和::after伪元素的作品。其他浏览器可能支持它，但这是against official documentation。

的好消息是，你需要做的唯一的变化是：

#changeLayer::before{ 
    ...