Firefox div 像素化背景图片不工作

Question

我有个小问题。图像渲染不适用于 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;
}

背景图片 ->

相同代码的结果：

Answer 1

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

Answer 2

我想我解决了。

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

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

Firefox div 像素化背景图片不工作

Firefox div pixelated background image not working

html

css

firefox

google-chrome

background-image