Firefox div 像素化背景图像不起作用答案

【问题标题】：Firefox div pixelated background image not workingFirefox div 像素化背景图像不起作用
【发布时间】：2020-12-27 01:42:16
【问题描述】：

我有一个小问题。图像渲染不适用于 Firefox 中 div 的背景图像，但在 Chrome 中它可以正常工作。

如何在 Firefox 中也像素化背景？

<div id="loadingScreen" class="loadingScreen">
    ...
</div>

.loadingScreen{
    position:fixed;
    top:0;
    left:0;
    z-index:50;
    width:100%;
    height:100%;
    background-color:#322007;
    background-image:url("../assets/textures/gui/menu_background.png");
    background-size:64px;
    image-rendering:pixelated;
    background-position:center;
}

背景图片 ->

具有相同代码的结果：

【问题讨论】：

标签： html css google-chrome firefox background-image

【解决方案1】：

我想我解决了。

我添加了一行crisp-edges，它看起来一样。在 Chrome 中仅适用于 pixelated，在 Firefox 中仅适用于 crisp-edges。

image-rendering: pixelated;
image-rendering: crisp-edges;

【讨论】：

【解决方案2】：

你不能 - Firefox 不支持这个 CSS - https://caniuse.com/mdn-css_properties_image-rendering_pixelated

【讨论】：

是否有任何替代解决方案来像素化背景？