Question

我搜索了文档，堆栈溢出，Google并尝试了我能想到的每个CSS变体，并且无法确定将图像设置为div或元素标记（如使用CSS的正文）的背景的方法。应该很简单吧？

尝试包括：

#element { background-image: url(<% asset_path "image.jpg" %>); }
#element { background: url(<% asset_path "image.jpg" %>); }
#element { background-image: url({% asset-path "image.jpg" %}); }
#element { background-image: {% asset-path "image.jpg" %}; }
#element { background-image: url("image.jpg"); }

还有更多。基本上，我已经尝试了我能想到的所有可能的变化，包括许多我没想要的工作 ahem ，我找到答案的努力已经用尽了。

知道Jekyll和Jekyll-Assets的人能为自己和未来的Jekyll澄清如何完成这项任务吗？

Answer 1

我想我遇到了你的问题。如果您的CSS文件位于站点的根文件夹中，则可以使用此表达式

#element { background-image: url(images/image.jpg); }

如果它在一个文件夹中很深，就好像CSS文件在CSS文件夹中那样_CSS/Style.CSS，那么你需要相应地更改URL

#element { background-image: url(../images/image.jpg); }

如果它在两个文件夹中深入使用此表达式

#element { background-image: url(../../images/image.jpg); }

Answer 2

我也被这个难过了。我在其中一个回购issues中找到了插件作者的解决方案：

由jekyll-assets处理的资产不会通过正常传递 StaticFiles处理Jekyll的管道。因此他们不处理YAML 前面的事。此外，jekyll-assets不是具有流动性的流程文件。如果你需要asset_path助手，你不想使用SASS，例如，你可以使用ERB。只需在styles.css.erb和。中重命名styles.css即可你能够在其中起诉ERB：

#header {   background-image: url(<%= asset_path "mybackground.png" %>); > }

ERB是Ruby stdlib的一部分，因此不需要额外的宝石用它。有关详细信息，请查看jekyll-assets介绍 ERB，SASS in jekyll-assets等等。

Answer 3

试试#element { background: url(asset_path("image.jpg")); }。它对我有用。

Answer 4

对我来说，只有将css文件扩展名与css.scss一起更改的组合，以及#element { background: url(asset_path("uri/to/file.jpg")); }，必须与双引号一起使用。

此外，有时它不会复制资产，然后我需要jekyll clean和rm -rf .asset-cache。

assets:
    cache: false

_config.yml中的

也可能有所帮助。

Answer 5

文档没有提及它，但jekyll-assets（至少版本0.7.7）似乎支持相同的asset-path helpers as the sass-rails gem：

#element { background-image: url(image-path("image.jpg")); }

或者，更简洁：

#element { background-image: image-url("image.jpg"); }

Answer 6

在编译SASS文件时，Jekyll默认为_sass，因此如果您更改了文件的位置（可能是因为您使用的是jekyll-assets），那么您需要更新_config.yml以使用新的位置。在配置文件中添加：

sass:
    sass_dir: _assets

根据Jekyll Assets文档，_assets是jekyll-assets的默认位置。

对于内置的SASS支持，您需要使用Jekyll 2.0.0或更高版本。

Answer 7

这适用于嵌入式CSS：

<div style="background-image: url({% asset 1920x1080.jpg @path %})"></div>

Answer 8

这应该有效：）

#element { background-image: url({{ site.url }}/{{ asset-path }}/image.jpg); }

如果您没有设置site-url

#element { background-image: url({{ asset-path }}/image.jpg); }

或

#element { background-image: url(images/image.jpg); }

使用Jekyll-Assets设置背景图像

8 个答案: