【问题标题】:Background-image Path using Sass with Gulp使用 Sass 和 Gulp 的背景图像路径
【发布时间】: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“文件结构”以查看有关整个文件结构的信息)。我想将背景图像用于覆盖一个屏幕尺寸的标题,并且我想使用背景图像功能用图片覆盖容器。谢谢,伙计们。

标签: html css sass


【解决方案1】:

我真的不能很好地看到缩进,但我认为它是这样的。

.img_header {
  background-image: url('../../../assets/img/flugzeug_375x667.jpg');
}

将来,您应该尝试使用公共文件夹并使用 Webpack 之类的工具将其合并到您的构建中。如果您的文件通过 Internet 提供,您也可以使用绝对路径。

【讨论】:

  • 您好,谢谢您的回复。我将 GulpGulp Sassbrowser-sync 工具一起使用(作为测试服务器)。我编辑了线程以更准确地解释我的问题。如上所示,我还写了一条评论。不幸的是我仍然找不到解决方案:(
  • @MarqueedeLuxe 这只是一种观点,但 Gulp 有点过时了。如果你正在构建 React 应用程序,你应该尝试转移到另一个打包工具,比如 Webpack 或 CRA。
  • 感谢您的请求。你知道如何开始使用 webpack 的好教程吗?因为我对这些东西没有太多经验。我仍然想知道为什么我的背景不起作用。
  • 发现错误。这是容器高度的问题。 div 刚刚折叠,因为里面没有内容 :-/.现在我设置了一个高度:100 vh,图像显示得很好。
  • @MarqueedeLuxe 大声笑以供将来参考,您可以使用开发工具查看它是否在“网络”选项卡下加载,或者您可以将鼠标悬停在“元素”选项卡中的路径上,它应该会弹出(Chrome) .
猜你喜欢
  • 2012-02-19
  • 2016-12-30
  • 1970-01-01
  • 1970-01-01
  • 2020-05-15
  • 1970-01-01
  • 1970-01-01
  • 2011-08-16
  • 2011-01-25
相关资源
最近更新 更多