使用變換縮小圖像時是否可以避免模糊？

Question

我在100％的div上設置了背景圖像。

<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