如何修复模糊的图像答案

【问题标题】：How to fix blurry image如何修复模糊的图像
【发布时间】：2015-07-25 13:38:22
【问题描述】：

我使用引导程序创建了这个测试登录页面：http://ubersnap.netai.net

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

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

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

如果有任何区别，图片就是 GIF。

【问题讨论】：

标签： css html image twitter-bootstrap gif

【解决方案1】：

刚刚偶然发现this。

第一个修复对我有用：

img {
    -webkit-backface-visibility: hidden;
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
}

【讨论】：

【解决方案2】：

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

【讨论】：

模糊的不仅仅是边缘。整个图像不清晰

【解决方案3】：

您需要为不同的屏幕尺寸设置不同的图像。有很多方法可以做到这一点，最简单的方法是使用媒体查询并具有相同图像的不同尺寸/版本。

Some example code sited from smashingmagazine.com:

/* default screen, non-retina */
.hero #cafe { background-image: url("../img/candc970.jpg"); }

@media only screen and (max-width: 320px) {
    /* Small screen, non-retina */
    .hero #cafe { background-image: url("../img/candc290.jpg"); }
}
@media
only screen and (min-resolution: 2dppx) and (max-width: 320px) {
    /* Small screen, retina */
    .hero #cafe { background-image: url("../img/candc290@2x.jpg"); }
}
@media only screen and (min-width: 321px) and (max-width: 538px) {
    /* Medium screen, non-retina */
    .hero #cafe { background-image: url("../img/candc538.jpg"); }
}

【讨论】：