Rails：从CSS加载图像

Question

在我看来，我可以使用以下代码行加载图像：<div id="bglion"><%= image_tag("BG-LION6.png")%></div>（这样可行），但我想从CSS文件中加载图像。

读完arround后，我试过了：

#bglion {src: background:url('BG-LION6.png');}
#bglion {src: asset-url('BG-LION6.png');}
#bglion {src: asset-url('BG-LION6.png', image);}

...但图片不会在页面上加载。 我怎样才能使它发挥作用？

（图片位于/ assets / images）

Answer 1

我认为你必须要做几件事。你的CSS应该更像是这样：

#bglion { background: image-url('BG-LION6.PNG'); }

background是您实际尝试设置的CSS属性。 src不是CSS属性。 image-url是指向图像资源文件夹的Rails路径助手。我相信如果您只使用asset-url它指向您的整个资产文件夹，您仍然需要指定您的图像位于图像文件夹中。

其次，如果您的div不再包含图像，它将折叠到宽度和高度0，因为没有任何内容可以定义其尺寸。您必须向包装器div添加更多CSS以定义图像的尺寸。所以像这样：

#bglion { background: image-url('BG-LION6.PNG'); width: 100px; height: 100px; }

Answer 2

尝试改为：

#bglion { background: url("/BG-LION6.png"); }

或

#bglion { background: url("/assets/BG-LION6.png"); }

取决于您使用的导轨版本以及您设置资源的文件夹。

访问资产时，应始终将路径设为绝对路径而不是相对路径。

Answer 3

您可以将css文件更改为css.erb扩展名，然后执行此类操作

#bglion {
background-image: url(<%=asset_path "BG-LION6.png"%>);
}