基于窗口大小切换背景图的jQuery代码异常求助

嘿，我能帮你定位到问题啦！控制台日志能正常输出，说明你的窗口大小判断逻辑是没问题的，问题出在CSS属性的赋值格式上。

问题根源 #

CSS的background-image属性要求值必须是url('图片路径')这种格式，但你直接把从data-dbg/data-mbg取到的字符串赋值给它了——浏览器根本识别不了这种裸路径，自然不会显示背景图。

修改后的代码 #

把赋值语句里的路径用url()包裹起来就可以了，用模板字符串会更简洁：

function resize(){
  var dbg = $('.full-screen-banner').data('dbg');
  var mbg = $('.full-screen-banner').data('mbg');
  if ($(window).width() < 768) {
    console.log('less than');
    $(".full-screen-banner").css('background-image', `url(${mbg})`);
  } else {
    $(".full-screen-banner").css('background-image', `url(${dbg})`);
  }
}
resize();
$(window).on('resize', resize);

额外检查点 #

• 确认你的.full-screen-banner元素上的data-dbg和data-mbg属性里是正确的图片完整路径，比如：

  <div class="full-screen-banner" data-dbg="/path/to/desktop-bg.jpg" data-mbg="/path/to/mobile-bg.jpg"></div>
  

• 确保图片路径没有拼写错误，浏览器能正常访问到这些图片

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