我试图找出如何设置不同的背景图片为我的Rails 3网站的每个页面。 我怎样才能做到这一点，而不必重复我在每一页我的CSS文件？
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Site title</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="container">
<div class="content">
<%= yield %>
</div>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
pages.css.scss
.container {
width: 800px;
height: 640px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -320px;
margin-left: -400px;
background-image: url(amber1.jpg);
background-repeat: no-repeat;
background-color: black;
font-family: times new roman, serif;
text-align: center;
}
我不认为你可以做到这一点使用CSS。 即使SCSS，则必须将其编译成纯CSS，然后才能使用它，因此你不能改变它的飞行。 但是，你可以省略从CSS背景图像，然后做
<div class="container" style="background: url(<%= @my_computed_image_path %>)">
</div>
然后，所有您需要做的是建立@my_computed_image_path在某种的before_filter的控制器。
你可以在你的HTML像这样直接设置背景图片属性：
<!DOCTYPE html>
<html>
<head>
<title>Site title</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="container" style="background-image: url(<%=@page.background_image%>); ">
<div class="content">
<%= yield %>
</div>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
你可以从你的@page变量或你所希望的方式直接设置你的背景imagen画质。
如果你愿意，你还可以设置像这样一个样式表的每一页不同的类：
.page_one{background-image: url(your_first_image.jpg)}
.page_two{background-image: url(your_second_image.jpg)}
.
.
而在你的HTML：
<div class="container <%=dynamically set here the class from you @page%>">
您可以创建一个my_styles.scss.erb文件并设置这样的一个变量：
$body-background-color: <%= @page.body_background_color %>
然后，你可以在你的SCSS文件中使用它。
