4

Rails3サイトのページごとに異なる背景画像を設定する方法を見つけようとしています。ページごとに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;
    }
4

3 に答える 3

3

css を使用してこれを行うことはできないと思います。scss であっても、使用する前に純粋な css にコンパイルする必要があるため、その場で変更することはできません。ただし、css から背景画像を省略して実行することもできます。

<div class="container" style="background: url(<%= @my_computed_image_path %>)">
</div>

あとは、ある種の before_filter で @my_computed_image_path をコントローラーに設定するだけです。

于 2012-06-21T18:32:14.567 に答える
0

my_styles.scss.erbファイルを作成し、次のような変数を設定できます。

$body-background-color: <%= @page.body_background_color %>

その後、scss ファイルで使用できます。

于 2012-06-21T23:55:39.253 に答える
0

次のように、html で background-image プロパティを直接設定できます。

<!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 変数から直接設定することも、希望する方法で設定することもできます。

必要に応じて、次のようなスタイルシートを使用して、ページごとに異なるクラスを設定することもできます。

.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%>">
于 2012-06-21T23:04:57.377 に答える