如何避免背景图片在屏幕尺寸调整时出现画质损失、模糊问题

你当前遇到的背景图模糊问题，主要是两个原因叠加导致：一是所用的背景图原始分辨率仅610×406，远小于常用桌面设备的视口尺寸，background-size: cover属性会将图片强制拉伸至铺满视口，就会出现模糊；二是浏览器默认对拉伸的图片采用平滑插值算法，会进一步加重模糊感，可通过以下方案解决：

• 优先替换高清背景素材
  准备至少1920px宽度以上的同素材高清图，适配主流桌面设备的显示需求，有条件的话可以准备1x、2x、3x多套资源，对应不同分辨率的设备加载，同时可以将图片转为WebP等压缩格式，控制加载体积不影响页面加载速度。
• 优化CSS渲染属性
  在你的body样式中新增图片渲染相关属性，修改后的body样式参考：

body {
  background-image: url("你的高清背景图地址");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  font-family: "Lato", sans-serif;
  /* 新增以下两行优化渲染 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

• 响应式适配不同设备
  增加媒体查询规则，不同尺寸的设备加载对应规格的背景图，避免资源浪费也能保证各设备下的显示清晰度：

/* 移动端设备 */
@media (max-width: 768px) {
  body {
    background-image: url("适配移动端的背景图地址");
  }
}
/* 2K及以上分辨率设备 */
@media (min-width: 1920px) {
  body {
    background-image: url("2K分辨率背景图地址");
  }
}

• 兜底优化方案
  如果暂时找不到高清素材，可以给背景增加半透明遮罩弱化模糊感，或者添加轻微的高斯模糊滤镜让拉伸后的边缘更自然：

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: -1;
  /* 可选：添加轻微模糊 */
  /* backdrop-filter: blur(2px); */
}

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