背景图片加载失败：全屏着陆页开发问题求助

AI 小北

2026-5-15

解决全屏着陆页背景图片加载失败的问题

嘿，我看到你在制作全屏着陆页时碰到了背景图片加载不出来的问题，咱们一起来搞定它！你的代码里有两个关键问题需要修正：

1. CSS属性混用错误

你在background-image里同时写了图片路径和no-repeat，这是不对的——background-image属性只负责指定图片的URL，no-repeat属于background-repeat的属性。你可以分开写各个背景属性，或者用复合的background属性来合并设置。

2. 相对路径错误

你的CSS文件放在css/目录下，要引用同级目录下的images/文件夹里的图片，相对路径应该用../回到上一级（也就是项目根目录fullscreen_test/），再指向images/warehousing-04.jpg。你之前写的/images/...是绝对路径，本地打开HTML文件时会从系统根目录找，自然找不到你的图片。

修正后的CSS代码（两种写法任选其一）

写法一：分开设置背景属性

@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Oswald');
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.landing {
  height: 100%;
  width: 100%;
  background-image: url("../images/warehousing-04.jpg");
  background-repeat: no-repeat;
  /* 额外推荐添加这两个属性，让图片完美适配全屏 */
  background-size: cover;
  background-position: center center;
}

写法二：使用复合`background`属性

@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Oswald');
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.landing {
  height: 100%;
  width: 100%;
  background: url("../images/warehousing-04.jpg") no-repeat center center / cover;
}