html - 仅在主页上的背景图像

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规则才能使其正常工作？

score 1 · Accepted Answer

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

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

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

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

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

1 回答 1