Css内容图像未在Firefox上显示

Question

我有以下css在另一个图形的顶部显示一个小图形，它适用于除Firefox以外的每个浏览器。在Firefox上会出现一个小黄框，但没有图像。我有什么办法可以让它出现在Firefox上吗？

.post-content-contract {
background: rgba(255, 255, 0, 1) none repeat scroll 0 0;
opacity: 1;
top:5%;
left:5%;
max-width: 50%;
max-height: 50%; 
position: absolute;
color: #ffffff; 
content:url(contract.png);
}

Answer 1

content is not meant to be used this way。它的用途仅限于:before和:after伪元素。

在您的情况下，最好的选择是使用background-image代替：

.post-content-contract {
    background-image: url(contract.png);
    background-size: cover;
    width: 100px;
    height: 80px;
    ...
}

Answer 2

我遇到了同样的问题，Firefox不支持content标记的img规则。在我的情况下用img替换div做了伎俩（img仅用作“容器”，因为所有属性和内容都在css中指定）并且图像显示在Chrome和Firefox上。但它不适用于IE或Edge。

Answer 3

对我来说，我发现在我的HTML中将其设置为img是问题所在。从“img”标签更改为“span”标签是让我在FireFox上运行的诀窍。