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上运行的诀窍。

Css内容图像未在Firefox上显示

3 个答案: