css - 如何修复模糊的图像

Question

我使用 Bootstrap 创建了这个测试着陆页:http://ubersnap.netai.net

如果您访问该网站并查看 iPhone 屏幕截图，您会发现您几乎无法阅读屏幕上的文字。

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

为什么会这样？有什么方法可以让图片在第一次加载时清晰，而不是调整浏览器窗口的大小？

如果有任何区别，该图像是 GIF。

Answer 1

试试这个 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) */
}