1
我在我的网页的CSS中有SVG图标。他们在Chrome和Safari中显示并响应,但完全不显示在Firefox中。问题是我通过content:url
链接到SVG的方式,是否有解决方法?Firefox中的SVG CSS内容
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:
我得到:
用'#changeLayer'图标,当我用':: before',图像变得庞大,占据了一半屏幕... –
是否有一个原因,你加载这些通过内容而不是背景图像在第一位? –
检查更新后的问题 - 这是因为我得到了背景填充图案而不是图标。 –