移动端禁用背景图加载，桌面端多分辨率适配的CSS实现需求

问题描述 #

我正在搭建一个带容器和背景图的网站，需求如下：

• 移动端设备不加载该背景图
• 桌面端根据不同设备宽度使用约5种不同分辨率的图片

但我没法在CSS里用类似<img style="width: 100%;" src="./img/normal.png" srcset="img/lowres.png 700w, img/normal.jpg 900w, img/highres.jpg 1100w" alt="test img">的srcset逻辑，现在只用了一张常规高分辨率图，不符合需求。当前CSS代码如下：

max-width: 2560px;
background-image: url("../img/test_image_2.jpg");
background-repeat: no-repeat;
background-attachment: fixed;

解决方案 #

1. 移动端禁用背景图

直接通过媒体查询针对移动端设备，将background-image设为none，确保浏览器不会发起图片请求：

/* 默认移动端不加载背景图 */
.your-container-class {
  max-width: 2560px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: none;
}

2. 桌面端按宽度加载不同分辨率背景图

提供两种可靠实现方式：

方法一：媒体查询分层设置（兼容性强）

针对不同桌面宽度区间，分别指定对应分辨率的背景图，浏览器只会加载匹配当前宽度的图片：

/* 桌面断点1：700px及以上 */
@media (min-width: 700px) {
  .your-container-class {
    background-image: url("../img/test_image_lowres.jpg");
  }
}

/* 桌面断点2：900px及以上 */
@media (min-width: 900px) {
  .your-container-class {
    background-image: url("../img/test_image_normal.jpg");
  }
}

/* 桌面断点3：1100px及以上 */
@media (min-width: 1100px) {
  .your-container-class {
    background-image: url("../img/test_image_highres.jpg");
  }
}

/* 桌面断点4：1400px及以上 */
@media (min-width: 1400px) {
  .your-container-class {
    background-image: url("../img/test_image_ultrares.jpg");
  }
}

/* 桌面断点5：2000px及以上 */
@media (min-width: 2000px) {
  .your-container-class {
    background-image: url("../img/test_image_2560.jpg");
  }
}

方法二：CSS image-set（现代浏览器简洁方案）

利用image-set让浏览器根据屏幕宽度自动选择最优图片，配合媒体查询限制仅桌面端生效：

@media (min-width: 700px) {
  .your-container-class {
    background-image: image-set(
      url("../img/test_image_lowres.jpg") 700w,
      url("../img/test_image_normal.jpg") 900w,
      url("../img/test_image_highres.jpg") 1100w,
      url("../img/test_image_ultrares.jpg") 1400w,
      url("../img/test_image_2560.jpg") 2560w
    );
    background-size: cover; /* 确保背景图适配容器 */
  }
}

注意事项

• 断点宽度可根据你的5种图片分辨率自行调整，保证每个区间对应最合适的图片尺寸
• 若需兼容旧版浏览器，优先选择方法一的媒体查询方案；image-set仅支持较新的浏览器版本
• 移动端设置background-image: none后，完全不会触发图片加载请求，符合需求

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