CSS 内容图像未显示在 Firefox 上
问题描述：
我有以下 css，它在另一个图形的顶部显示一个小图形，它在除 Firefox 之外的所有浏览器上都运行良好.在 Firefox 上会出现一个黄色的小框，但没有图像.有什么办法可以让它也出现在 Firefox 上吗?
I have the following css that displays a small graphic on top of another graphic, and it works well on every browser except Firefox. On Firefox a small yellow box appears, but no image. Is there anything I can do to make it appear on Firefox too?
.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);
}
答
content 不应以这种方式使用.它的使用仅限于 :before 和 :after 伪元素.
content is not meant to be used this way. It's use is limited to :before and :after pseudo elements.
在您的情况下，最好的选择是使用 background-image 代替:
In your case, the best option is to use background-image instead:
.post-content-contract {
background-image: url(contract.png);
background-size: cover;
width: 100px;
height: 80px;
...
}