带有资产管道的背景图像

Posted 2023-03-07

【中文标题】带有资产管道的背景图像

【英文标题】：Background images with asset pipeline

【发布时间】：2013-07-04 22:06:27

【问题描述】：

这应该是一件简单的事情，但由于某种原因它不起作用。

我无法在我的页面上显示背景图片。我将 Rails 3.2 与资产管道一起使用。我正在尝试在与我的 home 控制器相关的页面上显示它。

图片位置为：app/assets/images/dna.jpg

home.css.scss

background: url('/assets/images/dna.jpg');

我还尝试了以下方法：

background: url('dna.jpg');
background: url('/assets/dna.jpg');
background-image: image-url("dna.jpg");
background-image:url(image_path('dna.jpg'));

无论我尝试哪种方法，我都会收到相同的错误：

Sass::SyntaxError at /
Invalid CSS after "background:": expected pseudoclass or pseudoelement, was "   url('/assets/i..."

（在 /Users/sean/Dropbox/bin/rails/assay/app/assets/stylesheets/home.css.scss）

另请参阅此 SO 帖子：Adding a background image in Ruby on Rails 2 in CSS

编辑

参考此帖：sass-rails asset pipeline: generating image paths incorrectly; `url(/images/blah.png)` instead of `url(/assets/blah.png)`

我清除了资产缓存

rake tmp:cache:clear

并且捆绑更新了我的 sass-rails gem。现在是3.2.6。 这些都没有任何区别。

【参考方案1】：

我怀疑你的麻烦有一个非常简单的原因：缩进。在scss 中的大多数情况下，语句之后都没有空格，在您的情况下为background:。在你的 scss 前缀文件中也试试这个：

background: url(dna.jpg);

它总是对我有用。

【参考方案2】：

我找到了解决方法：将 scss 文件转换为普通的 css 文件。

home.css

body background-image:url('dna.jpg');
      background-size:cover;

现在它工作正常。不过，这似乎不是正确的解决方案。

【讨论】：

我怀疑你的麻烦有一个非常简单的原因：缩进。大多数情况下，在 scss 中，语句后没有空格，在您的情况下为 background:。在您的 scss 前缀文件中也可以试试这个：background: url(dna.jpg);。它总是对我有用。

@Qumara SixOneTour 你是对的。请将其添加为答案，以便我接受。

我很高兴能提供帮助。祝你申请顺利。

【参考方案3】：

我遇到了完全相同的问题，这是我在 SCSS 文件中使用 Sass 缩进语法的结果。

更多关于 Sass 和 SCSS 之间差异的信息：http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html