根据MDNimage-rendering
,目前提议的 CSS属性值为auto
,crisp-edges
和pixelated
。但我看不出和之间的区别crisp-edges
,pixelated
因为两者都应该只是放大像素而不是插值任何东西。
那么区别在哪里呢?
根据MDNimage-rendering
,目前提议的 CSS属性值为auto
,crisp-edges
和pixelated
。但我看不出和之间的区别crisp-edges
,pixelated
因为两者都应该只是放大像素而不是插值任何东西。
那么区别在哪里呢?
虽然@codl 的答案是正确的,但它是不完整的。根据规范,crisp-edges
有pixelated
两种不同,而不仅仅是一种。
crisp-edges
允许从根本上不同于最近邻的像素缩放算法。其他非平滑像素缩放器的示例包括hqx系列和EPX/Scale2x。但是,pixelated
必须使用最近邻或类似的。
crisp-edges
适用于放大和缩小,而pixelated
仅适用于放大。它使用与缩减相同的算法auto
。
造成这些差异的原因是它pixelated
是为像素化精灵设计的,即使在大尺寸下也可以清晰地像素化,但crisp-edges
旨在防止图像边缘变得模糊。如果按比例缩小,小精灵会变得更模糊是可以的,因为它的像素化程度不会低于其原始尺寸。并且使用像素艺术缩放算法确实可以保持清晰的边缘,但它也减少了像素化,这与pixelated
设计的目的相反。
也就是说,目前提出的用途pixelated
与精灵无关,而是利用双重缩放算法。例如,在 HiDPI 屏幕上,普遍认为auto
升级到正常 DPI 会产生模糊的图标。使用pixelated
将允许图标放大而不会变得模糊,但也可以让它们正常缩小。这允许在纯 CSS 中使用两种不同的缩放算法,而无需使用 JavaScript 检查原始图像的大小或最终的显示大小。