使用Jekyll-Assets設置背景圖像

我搜索了文檔，堆棧溢出，Google和嘗試過的每一個CSS變體，我都能想到，並且無法確定將圖像設置爲div或元素標記背景的方式作爲使用CSS的正文。應該很簡單吧？使用Jekyll-Assets設置背景圖像

嘗試包括：

#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，我的努力找到一個答案已經用盡。

有人知道傑基爾和傑基爾資產爲我自己和將來澄清傑基爾啓動如何完成這項任務？

來源

2014-01-16 James Targett

這應該工作:)

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

如果你沒有網站的URL設置

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

或

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

來源

2014-01-16 08:26:57

不幸的是，這並沒有爲我工作。不過謝謝。：/ –

我想我得到了你的問題做。如果你的CSS文件是在您的網站的根文件夾，你可以用這個表達

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

如果一個文件夾中的深一樣，如果CSS文件是在像這樣_CSS/Style.CSS的CSS文件夾，然後您需要更改URL因此

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

如果兩個文件夾深使用這種表達

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

來源

2014-01-17 06:34:28

的文件沒有提到這一點，但是哲基爾資產（至少versio ñ0.7.7），似乎支持相同asset-path helpers as the sass-rails寶石：

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

，或者更簡潔：

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

來源

2014-04-19 01:45:02

我被這個難住了。我發現從插件作者的解決方案在回購issues之一：

資產的哲基爾資產處理不通過哲基爾正常 StaticFiles工藝管道通過。因此他們不處理YAML 的前端事宜。另外jekyll資產不是液體的過程文件。如果您需要asset_path幫助程序，並且您不想使用SASS，例如，則可以使用ERB。只需重命名styles.css.erb你styles.css的和你就可以起訴ERB它：

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

ERB是Ruby的STDLIB的一部分，所以沒有額外的寶石是必需的到使用它。關於 ERB，jekyll資產中的SASS的詳細信息，請參考jekyll-assets介紹。

來源

2015-06-19 05:47:14

謝謝，這是唯一對我有用的解決方案。 –

嘗試#element { background: url(asset_path("image.jpg")); }。這個對我有用。

來源

2016-05-05 20:26:28 jupiteror

編輯SASS文件時，Jekyll默認爲_sass，所以如果您因使用jekyll-assets而更改了文件的位置，那麼您需要更新_config.yml以使用新位置。在配置文件中加入：

sass: 
    sass_dir: _assets

按照該Jekyll Assets文檔，_assets是哲基爾資產的默認位置。

對於內置的SASS支持，您需要使用Jekyll版本2.0.0或更高版本。

來源

2016-06-10 03:35:33 Ash

對於我來說，只是改變CSS文件擴展名的組合css.scss，加上#element { background: url(asset_path("uri/to/file.jpg")); }，必然與雙引號，工作。

此外，有時它不會複製資產，然後我需要jekyll clean和rm -rf .asset-cache。

assets: 
    cache: false

in _config.yml也可能有幫助。

來源

2017-04-10 16:11:20 Antek

使用Jekyll-Assets設置背景圖像

回答

相關問題