CodeIgniter框架下按设备切换背景图失效问题求助

看起来你的问题核心是VANTA的Canvas特效覆盖了body的背景图，导致你写的媒体查询即使语法正确，也看不到预期的移动端背景图变化。另外你的代码里还有几处语法错误需要先修复，我一步步帮你解决：

第一步：修复代码中的语法错误 #

你提供的VANTA初始化代码末尾多了3个多余的}，这会导致JS执行出错，先把它修正：

// 正确的VANTA初始化代码
VANTA.BIRDS({
  el: "body",
  colorMode: "varianceGradient",
  wingSpan: 23.00,
  speedLimit: 8.00,
  separation: 60.00,
  alignment: 35.00,
  cohesion: 24.00,
  backgroundAlpha: 0.36,
})

第二步：解决背景图被Canvas遮挡的问题 #

VANTA会在你指定的el（这里是body）内部生成一个全屏的Canvas元素，默认是绝对定位覆盖在最上层，所以你给body设置的背景图会被这个Canvas挡住，媒体查询的样式自然看不到效果。这里有两种靠谱的解决方案：

方案1：用CSS直接给VANTA的Canvas设置背景 #

VANTA生成的Canvas会带有vanta-canvas类，你可以直接针对这个类写媒体查询：

/* 桌面端背景 */
.vanta-canvas {
  background-image: url("http://www.sclance.com/backgrounds/svg-background-image/svg-background-image_2162863.jpg");
  background-size: cover; /* 确保背景图铺满全屏 */
  background-position: center center;
}

/* 移动端背景（屏幕宽度≤600px） */
@media only screen and (max-width: 600px) {
  .vanta-canvas {
    background-image: url("https://images.unsplash.com/photo-1527335480088-278dbeec0ad5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
  }
}

方案2：用JavaScript动态切换VANTA背景图（更灵活） #

如果需要更精准的控制，比如窗口大小变化时实时切换，可以用JS检测屏幕尺寸，动态初始化/更新VANTA实例：

// 定义初始化VANTA的函数
function initVantaBackground() {
  // 根据屏幕宽度选择背景图
  let bgUrl = "http://www.sclance.com/backgrounds/svg-background-image/svg-background-image_2162863.jpg";
  if (window.innerWidth <= 600) {
    bgUrl = "https://images.unsplash.com/photo-1527335480088-278dbeec0ad5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80";
  }

  // 先销毁已有的VANTA实例（避免重复初始化）
  if (window.vantaInstance) {
    window.vantaInstance.destroy();
  }

  // 初始化新的VANTA实例，直接传入背景图
  window.vantaInstance = VANTA.BIRDS({
    el: "body",
    colorMode: "varianceGradient",
    wingSpan: 23.00,
    speedLimit: 8.00,
    separation: 60.00,
    alignment: 35.00,
    cohesion: 24.00,
    backgroundAlpha: 0.36,
    backgroundImage: bgUrl // 这里直接设置背景图
  });
}

// 页面加载时初始化
window.addEventListener('load', initVantaBackground);
// 窗口大小变化时重新初始化（适配移动端旋转屏幕的情况）
window.addEventListener('resize', initVantaBackground);

额外检查项 #

• 确保你的CSS文件在VANTA的JS之后引入，或者用!important（不推荐，但紧急情况下可以测试）验证样式是否被覆盖；
• 检查CodeIgniter的模板是否正确加载了你的CSS和JS文件，没有路径错误；
• 打开浏览器的开发者工具（F12），查看Elements面板中的body和.vanta-canvas元素，确认背景图是否被正确应用。

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