参考Rails文档，我们可以看到有几种方法可以链接到css中的图像。请参阅第2.3.2节。

首先，如果您的css文件是sass文件，请确保它具有.scss扩展名。

接下来，你可以使用ruby方法，这真的很难看:

#logo { background: url(<%= asset_data_uri 'logo.png' %>) }

或者你可以使用更好的特定形式:

image-url("rails.png") returns url(/assets/rails.png)
image-path("rails.png") returns "/assets/rails.png"

最后，你可以使用一般形式:

asset-url("rails.png") returns url(/assets/rails.png)
asset-path("rails.png") returns "/assets/rails.png"

默认情况下，Rails 4不会为您的资产服务。要启用此功能，您需要进入配置/应用程序。Rb，加上这一行:

config.serve_static_assets = true

https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets

在Rails 4中，你可以像这样在你的.SCSS文件中引用位于assets/images/中的图像:

.some-div {
  background-image: url(image-path('pretty-background-image.jpg'));
}

当你以开发模式启动应用程序时(localhost:3000)，你应该会看到如下内容:

background-image: url("/assets/pretty-background-image.jpg");

在生产模式下，你的资产将有缓存助手编号:

background-image: url("/assets/pretty-background-image-8b313354987c309e3cd76eabdb376c1e.jpg");

链轮一起萨斯有一些漂亮的帮手，你可以用它来完成工作。链轮只会在样式表文件扩展名为.css时处理这些helper。或。css.sass。

图像特定的帮助器:

background-image: image-url("logo.png")

不可知论者的助手:

background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)

或者如果你想在css文件中嵌入图像数据:

background-image: asset-data-url("logo.png")

有趣的是，如果我使用'background-image'，它不起作用:

background-image: url('picture.png');

但是仅仅是“背景”，它就做到了:

background: url('picture.png');

在Rails 4中，只需使用.hero { 背景图片:url(“picture.jpg”); }在你的style.css文件，只要背景图像是隐藏在app/assets/images。