如何修复：jQuery媒体查询console.log正常但无法修改元素背景图

看起来你已经找对了方向，问题大概率出在执行时机和样式覆盖逻辑这两个点上，我来帮你梳理下可行的解决方案：

1. 核心问题分析 #

• 你的代码只在窗口resize事件触发时才执行，但页面首次加载时不会自动执行，所以初始状态下背景图始终是空值
• 虽然简化了background-image的写法，但直接拼接字符串设置单属性时，可能和元素内联样式的优先级或属性组合逻辑冲突，导致设置未生效

2. 修正后的代码实现 #

首先把切换逻辑封装成独立函数，这样既可以在页面加载时初始化，也能在resize时重复调用：

// 封装切换背景图的核心函数
function updateHeaderBackground() {
  const windowWidth = jQuery(window).width();
  // 提前获取PHP生成的图片路径，避免重复渲染
  const mobileBg = '<?php the_field("mobile_header_background"); ?>';
  const desktopBg = '<?php the_field("header_background"); ?>';

  if (windowWidth <= 800) {
    jQuery(".homehead").css({
      "background-image": `url(${mobileBg})`,
      "background-repeat": "no-repeat",
      "background-position": "center",
      "background-size": "cover"
    });
  } else {
    jQuery(".homehead").css({
      "background-image": `url(${desktopBg})`,
      "background-repeat": "no-repeat",
      "background-position": "center",
      "background-size": "cover"
    });
  }
}

// 页面加载完成后立即执行一次，初始化背景图
jQuery(document).ready(function() {
  updateHeaderBackground();
});

// 窗口尺寸变化时执行切换逻辑（可加防抖优化性能）
jQuery(window).resize(function() {
  updateHeaderBackground();
});

对应的HTML可以简化，去掉内联的背景样式，避免优先级冲突：

<div class="homehead"></div>

3. 额外优化建议 #

• 防抖优化：resize事件会频繁触发，加个防抖函数可以减少不必要的DOM操作，提升页面性能：

  let debounceTimer;
  jQuery(window).resize(function() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(updateHeaderBackground, 200); // 200ms延迟执行
  });
  

• 路径验证：可以在函数里加日志确认PHP输出的路径是否正确：

  console.log("移动端背景图路径：", mobileBg);
  console.log("桌面端背景图路径：", desktopBg);
  

• CSS兜底：如果jQuery加载失败，可以在CSS里设置默认背景图作为兜底：

  .homehead {
    background: url("默认图路径") no-repeat center / cover;
  }
  

为什么之前的写法不生效？ #

• 首次加载时没有执行代码，元素的背景图始终是初始的空值
• 直接拼接background完整属性字符串时，可能因为多余的分号或格式问题导致CSS解析错误，用对象形式设置多属性更可靠

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