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{ 
    ...