Question

我想在其主页上构建一个包含background-image的应用程序。我遇到的问题是家中唯一的内容来自layouts/header部分内容，一旦转到another controller's views，background image就不应该在那里。

我意识到如果我输入body{ background-image: url('background.jpg') }它会起作用，但它也适用于其他每一页。

另一个问题是，只有当网页内容足够覆盖image's size时，下面的代码才有效。

应用/视图/存储/家

<div class = "home">

</div>

CSS

.home {
    background-size: 100% 100%;
    background-image: url('background.jpg');
}

因此，background image不会出现在背景中。我应该使用css规则来实现这一目标吗？

Answer 1

创建一个<body> id属性，您可以将当前控制器和操作的值动态传递给：

# app/views/layouts/application.html.erb
<body id="<%= params[:controller]+'_'+params[:action] %>">

假设您的<body> id为home_index，您可以在CSS中定位以下内容：

body#home_index {
    background-size: 100% 100%;
    background-image: url('background.png');
}

这样，只有主页上的<body>标记（可能是从index控制器的home操作呈现的标记，在此示例中）已应用了CSS样式