如何在 Microsoft Edge 中对精灵背景图像放大进行反锯齿处理？

Posted 2023-02-16

【中文标题】如何在 Microsoft Edge 中对精灵背景图像放大进行反锯齿处理？

【英文标题】：How to un-anti-alias a sprite background image ENLARGEMENT in Microsoft Edge?

【发布时间】：2018-11-11 11:14:04

【问题描述】：

检查下面三个图中的问题。我想扩展已经在 Mozilla FireFox 和 Google Chrome 中完美运行的功能，以便在 Microsoft Edge 中也能完美运行。

---

Mozilla FireFox：Google Chrome：Microsoft Edge：

---

我想要在 Microsoft Edge 中对我的精灵图像放大进行故意像素化、非抗锯齿处理，但无论我尝试什么都失败了，所以远在那个单一的浏览器中。我想要一种优雅的纯 CSS 方式来扩展当前代码，以便在 Microsoft Edge 中它可以像在其他两个主要浏览器中一样工作。我还没有尝试什么？提前致谢！

html：

<box><icon style="background-position:0px -3081px"></icon></box>

CSS：

box 
float: left;
text-align: center;
width: 40px;


icon 
background:url(../layout/icons.png) no-repeat;
background-color: white;
margin: auto;
margin-top: -10px;
width:13px;
height:13px;
display: block;

-ms-transform: scale(3);
-o-transform: scale(3);
-webkit-transform: scale(3);
transform: scale(3);

-ms-interpolation-mode: nearest-neighbor;   /* IE8+ */
image-rendering: -moz-crisp-edges;          /* Firefox */
image-rendering: -o-crisp-edges;            /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering: pixelated;                 /* Chrome */
image-rendering: optimizeSpeed;             /* stop smoothing, speeden up instead */
image-rendering: optimize-contrast;         /* CSS3 Proposed */

【问题讨论】：

这在我看来就像developer.microsoft.com/en-us/microsoft-edge/platform/status/…，所以很有可能目前没有解决方案。

不幸的是，我尝试为最近的一个项目做同样的事情，但我无法找到适用于 IE/Edge 的解决方案，所以在 MS 提供解决方案之前，您可能会不走运跨度>

我认为目前没有办法将其作为背景图像。如果你想要一个纯 CSS 的解决方案，我唯一能想到的就是首先将它作为自定义图标字体的一部分，然后通过对其应用字体大小来放大它？

尝试使用 SVG，“像素”由正方形组成。 （您的最低 IE 要求是什么？）

你能不能只缩放图片然后放到网页上，这样就不用在浏览器上缩放了？

【参考方案1】：

我最近在一个 Web 项目中遇到了完全相同的问题，并且如 cmets 中所述，Edge 目前在技术上不支持它。恕我直言，因为它是开发社区 3 年多来的预期功能，并且在他们的积压中处于低优先级，我认为在此功能发布后等待是不值得的。

因为我必须完成工作，所以我解决问题的方法是使用更大的源图像并使用 CSS 缩小它们（这也是一件好事，尤其是在 Retina 等高密度屏幕上显示时） .

在您的特殊情况下，使用 SVG 等矢量图像是 IMO 甚至在 Edge 上完成工作的最佳方式，它的重量也比较大的图像更轻。