使用变换缩小图像时是否可以避免模糊？

Question

我在div上设置了100％的背景图像。

<div style="width: 990px; height: 742px; background-image: url('http://images.nationalgeographic.com/wpf/media-live/photos/000/913/cache/deadvlei-africa-namibia_91343_990x742.jpg'); background-size: 100%; background-repeat: no-repeat;"></div>

当我通过编辑元素的宽度/高度来缩小图像时，它会保留其质量。

<div style="width: 247.5px; height: 185.5px; background-image: url('http://images.nationalgeographic.com/wpf/media-live/photos/000/913/cache/deadvlei-africa-namibia_91343_990x742.jpg'); background-size: 100%; background-repeat: no-repeat;"></div>

但是，当我使用transform: scale缩小图像时，图像会失去质量。

<div style="width: 990px; height: 742px; background-image: url('http://images.nationalgeographic.com/wpf/media-live/photos/000/913/cache/deadvlei-africa-namibia_91343_990x742.jpg'); background-size: 100%; background-repeat: no-repeat; transform: scale(.25);"></div>

这是demo of the results。

在webkit浏览器中，图像似乎只会失去质量。 Chrome比Safari差。

是否有人知道为什么图片会因使用transform: scale而失去质量？如果有办法解决它？

Answer 1

这个问题已经被问到了。只需将模糊滤镜设置为0即可。 查看-webkit-transform: scale / blurry images