【发布时间】:2020-12-11 00:25:30
【问题描述】:
我的背景图片没有加载! 我在 stackoverflow 中搜索了一个解决方案,但我发现的东西并没有解决我的具体问题。
我使用 GULP 作为构建工具,使用 GULP SASS 编译器进行 SASS 编译,使用 GULP BROWSER-SYNC 作为测试服务器。
我的html
<section class="img_header">
<div class="text_img_header_centered">
<h1>blabla</h1>
<h2>blablablabla</h2>
</div>
</section>
我的 CSS:
.img_header {
background-image: url('/assets/img/flugzeug_375x667.jpg');
}
这是我的文件结构。文件夹 css 中的 main.css。 img 中的 blabla.jpg(如图所示)。我的 main.scss 在 dev 文件夹中。网站尚未上线。但是背景图像没有加载!有任何想法吗?此项目中仅包含一个 css 文件。所有其他属性都可以正常工作。
感谢您的帮助:)
【问题讨论】:
-
可能是路径问题。但在我们为您提供帮助之前,我们需要更多地了解该项目。你在使用像 Webpack 这样的构建工具吗?你用什么将 SCSS 处理成 CSS?所有这些东西都会对路径产生影响。
-
另外,您需要一个运行的网络服务器以使用
/作为 root。您的文件系统不知道那是什么。请记住,CSS 中的路径是相对于读取文件的页面而不是相对于 CSS 文件本身的。只需删除第一个 / 可能会解决问题,但我不知道您的 HTML 文件相对于站点根目录的位置。 -
大家好,感谢您的回复。很棒的社区。我会更精确。我使用 gulp 作为构建工具。我的 SCSS 编译器是 Gulp Sass。我正在使用 gulp-tool browser-sync。我的 index.html (需要图片)位于与资产文件夹相同的 lvl 上的站点文件夹的根目录中。 (请在主线程中检查我的图片9“文件结构”以查看有关整个文件结构的信息)。我想将背景图像用于覆盖一个屏幕尺寸的标题,并且我想使用背景图像功能用图片覆盖容器。谢谢,伙计们。