如何修复模糊图像 [英] How to fix blurry image

问题描述

我使用Bootstrap创建了此测试登录页：http://ubersnap.netai.net

如果你访问该网站并查看iPhone屏幕截图，你会发现你几乎看不到屏幕上的文字。

但是，如果您只是调整浏览器窗口的大小，并将窗口最大化为其原始大小，则它是100%清晰的。

为什么会发生这种情况？有没有办法在第一次加载图片时使其清晰，而不是调整浏览器窗口的大小？

如果这有什么不同，则该图像为GIF。

推荐答案

尝试此css可使图像边缘清晰。

.crisp-edges {
    image-rendering: -moz-crisp-edges;
    /* Firefox */
    image-rendering: -o-crisp-edges;
    /* Opera */
    image-rendering: -webkit-optimize-contrast;
    /* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    /* IE (non-standard property) */
}

这篇关于如何修复模糊图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！