1

我正在尝试在具有类的 div 的背景中渲染图像head。

我的application 观点写成Haml，正文定义如下：

%body
    .container
        .head
            .sixteen_columns
            .top-nav

我的application 样式表中包括：

.head {
    background-image: url(/images/background_image.jpg); 
    width: 100%; 
    height: auto;
}

我尝试了多种变体来指定图像的路径并多次更改图像名称但无济于事。

问题是什么？

4

5 回答 5

0

在 rails 4 中，您现在可以使用 css 和 sass 助手 image-url：

div.logo {background-image: image-url("logo.png");}

如果您的背景图像没有出现，请考虑查看您在 css 文件中如何引用它们。

于 2013-08-01T20:28:06.180 回答
0

asset_path在样式表中引用图像时 考虑使用帮助器。可以在此处找到文档（查看2.2.1）在上下文中，您列出的 CSS 会引起您的注意

.head {
  background-image:url(<%= asset_path 'background_image.jpg'%>); 
  width:100%; 
  height:auto;
}

注意：这要求您的样式表是 erb。

与显式说明路径相比，这样做提供了许多优势，其中一个是随着新版本发布的 Rails 应用程序结构发生变化，您无需更改代码中的任何内容即可正确引用该图像。

仅仅引用图像这似乎有点过头了，但它是 Rails 的众多约定之一，很难使用但很棒！随着您的应用程序的增长和变化，希望它能够更好地经受住时间的考验。

于 2012-07-24T03:17:24.660 回答
0

假设您使用的是 Rails 3.1 或更高版本，并且您正在为您的图像正确使用资产管道，您可以通过执行以下操作来包含您的图像文件：

.head {
    background-image: url(/assets/background_image.jpg); 
    width: 100%; 
    height: auto;
}

原因是资产管道的工作方式。它在运行时编译您的资产，并将您的所有资产放在一个名为/assets/. 它还忽略了子文件夹结构，它只是将所有内容转储到根/assets/文件夹中，而不是/assets/subfolder/.

于 2012-07-24T02:44:13.947 回答
0

解决方案：

事实证明这是两件事的结合。我将这种格式用于背景图像：

background-image: url(../images/background_image.jpg);

但是， 正在使用 的进行.head div渲染。我添加了一个固定的高度来测试，一切都完美地显示出来了。我可以从这里开始工作。height0

非常感谢大家的帮助！！

于 2012-07-24T14:32:12.833 回答
0

尝试运行

rails -v

从控制台确认您使用的 Rails 版本。

听起来您正在运行 rails 2.x 应用程序，对吗？这应该意味着您正在从 /public 目录提供图像、js 等。一个让我在 CSS 中设置背景图像时遇到的重要问题是，您指定的路径是相对于样式表所在的目录（例如 /public/stylesheets），而不是项目本身的根目录。

您是否尝试过更改路径以从样式表所在的目录上移一个目录？

.head {
    background-image: url(../images/background_image.jpg); 
    width: 100%; 
    height: auto;
}

编辑：您尝试过哪些其他通往 bg 图像的路径？

其他一些可能性可能是：

  background-image: url(images/background_image.jpg); 
  background-image: url('../images/background_image.jpg');

要检查的另一件事是加载视图并使用检查器 (Ctrl Shift + I) 在 Google Chrome 中检查 div。选择 div 并检查 Chrome 分配给它的样式。

另外，请仔细检查它是否仍然命名为 background_image.jpg 无法告诉你我被我忽略的一些错字烧伤了多少次；）

于 2012-07-24T03:43:06.370 回答