如何在CSS的URL中使用变量实现自适应背景图？

你的代码存在几个关键问题导致无法生效，以下是修正方案和可行实现方式：

原代码的问题点 #

• 事件监听对象错误：应该监听window的resize事件，而非document。
• 尺寸取值错误：window.screenX/screenY是屏幕相对于浏览器窗口的偏移量，不是可视区域尺寸，正确取值应为window.innerWidth/window.innerHeight。
• CSS变量在url()中的写法不被浏览器支持：目前浏览器无法直接解析url()路径里的CSS变量，无法将变量值替换到URL路径中。

可行实现方案 #

直接通过JavaScript动态生成完整的背景图URL，并设置到对应的元素上，既能适配屏幕尺寸变化，也能支持每个元素使用独立的random参数。

代码实现 #

JavaScript

// 定义更新背景图的函数
const updateBackgrounds = () => {
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;
  
  // 遍历4个元素（假设id为element1到element4）
  for (let i = 1; i <= 4; i++) {
    const targetElement = document.getElementById(`element${i}`);
    if (targetElement) {
      // 生成对应尺寸和random参数的URL
      const bgUrl = `url(https://picsum.photos/${viewportWidth}/${viewportHeight}?random=${i})`;
      targetElement.style.backgroundImage = bgUrl;
    }
  }
};

// 页面加载完成后初始化一次
updateBackgrounds();
// 监听窗口尺寸变化，实时更新背景图
window.addEventListener('resize', updateBackgrounds);

CSS（可选，给元素设置基础样式）

/* 给所有目标元素设置基础尺寸和背景适配方式 */
[id^="element"] {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center center;
}

说明 #

• 初始化时执行一次updateBackgrounds，确保页面加载时就有正确尺寸的背景图。
• 监听window.resize事件，每次窗口尺寸变化时重新生成URL并更新背景。
• 每个元素通过循环对应random=1到random=4的参数，保证图片独立。

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