css - 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 中）

score 4 · Accepted Answer

我认为你必须做几件事。您的 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; }

score 3 · Accepted Answer

尝试这样做：

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

或者

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

取决于您使用的 Rails 版本以及您将资产设置在哪个文件夹。

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

score 1 · Accepted Answer

您可以将您的 css 文件更改为具有 css.erb 扩展名，然后执行类似这样的操作

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

3 回答 3