添加h-screen、bg-cover等样式后背景图仍失真，如何解决？

• 使用足够分辨率的原图：你当前用的图片链接大概率是平台的低分辨率预览图，这类图用于全屏容器时会被强制拉伸放大，必然模糊。要替换为和容器尺寸匹配（甚至更大，比如适配2K/4K屏幕）的高清原图，比如从素材平台下载对应尺寸的无压缩版本。

• 添加CSS渲染优化属性：通过image-rendering系列属性让浏览器采用更清晰的缩放算法，减少模糊：

#container {
  height: 100vh; 
  background-image: url('你的高清图片地址'); 
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center;
  /* 优化背景图渲染清晰度 */
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

• 避免平台自动压缩：部分图片托管平台会对预览图做高压缩处理，要确保使用的是未经过过度压缩的图片资源，自行导出图片时选择高质量参数（如JPEG质量设置85以上）。

• 按需调整背景尺寸属性：如果业务允许容器不全屏填满，可尝试用background-size: contain替代cover，它会保持图片原比例完整显示，不会因拉伸导致模糊，但容器边缘会出现空白区域。

内容的提问来源于stack exchange，提问作者Marcellus