Css 如何修复模糊图像

我使用引导创建了此测试登录页：

如果你访问该网站并查看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) */
}

只是偶然发现

第一次修复对我有效：

img{
-webkit背面可见性：隐藏；
-ms变换：translateZ（0）；/*IE 9*/
-webkit转换：translateZ（0）；/*Chrome、Safari、Opera*/
变换：translateZ（0）；
}

模糊的不仅仅是边缘。整个图像是不锐化的

.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) */
}