Question

我想为我的应用的主页设置两个不同的背景图像，并为项目设置索引视图。我在主视图中直接尝试了这个：

<div class="container" style="background: url('/assets/images/hom.jpg')">

但它没有显示任何图像。有人可以帮帮我吗？我已经尝试过这篇文章，但它仍然无法奏效。 How to set a different background image for each page in Rails 3 site?

Answer 1

在网址中没有/ assets /的情况下尝试一下。 rails资产管道不要求您声明它位于/ assets /目录

中

Answer 2

您可以通过设置适当的CSS类并在样式表中设置图像背景来实现此目的。类似的东西：

 <div class="container home">

在SCSS文件中：

.container.home{
    background-image: image-url("hom.jpg");
}

请注意，image-url是应该在.scss个文件中使用的帮助程序。

Answer 3

执行此操作的一种方法是将控制器和操作名称添加到布局中的body标记。然后你可以依靠纯CSS来提供不同的图像。在布局文件中，您可以执行以下操作：

<%= content_tag :body, class: "#{controller_name}-#{action_name}" do %>
  <!-- Your layout content, or everything that should be in the body tag goes here -->
<% end %>

这会给你以下HTML：

<body class="items-index> <!-- or whatever the current controller/action are -->

然后，您可以添加相关的CSS。

.items-index {
    background-image: image-url("items_index.jpg");
}
.pages-home {
    background-image: image-url("pages_home.jpg");
}

您可以将其包装在帮手中以使其更清洁。

def class_for_body
  "#{controller_name}-#{action_name}"
end

甚至：

def body_tag(&block)
  content_tag :body, yield, class: "#{controller_name}-#{action_name}"
end

请参阅Rails提供的controller_name和action_name方法。

Answer 4

我在我的网页上试过这个：

<div style="background-image: url('/assets/hom.jpg')">

它似乎在本地工作，但在推动Heroku后，图像不会在线显示。此外，图像显示为切割，因为它被称为DIV，我希望它被引用到我的页面主体。

导轨4家庭和项目索引视图的不同的背景图象

4 个答案: