如何使我的背景圖像僅顯示在rails 4中的一個頁面上？

Question

我有一張背景圖片，我不能只留在一頁上。 我已經制作了一個帶有一個主視圖的歡迎控制器來顯示它。 我也在預編譯我的資產。 背景顯示很好，但我的目標是在home.html.erb視圖中顯示背景圖像。

歡迎/ home.html.erb：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%= I18n.locale || 'en' %>"    

lang="<%= I18n.locale || 'en'%>">
<body class="container">
<h1>title</h1>
</body>

</html>

歡迎控制器：

class WelcomeController < ApplicationController
 def home
 end
end

樣式/ welcome.css.scss：

body 
{
background: {
image: asset-url("image.jpg");
 }
}

我的應用程序布局中有以下內容：

<head>
<%= stylesheet_link_tag "welcome" if controller_name == "welcome" %>
</head>

在config / initializers / assets.rb中：

Rails.application.config.assets.version = '1.0'


Rails.application.config.assets.precompile += %w( welcome.css )

Answer 1

添加特定的CSS，

body.welcome 
{
  background: {
   image: asset-url("image.jpg");
 }
}

在HTML中，

 <body class="container welcome">

你必須想知道，即使你沒有包含特定的文件，那么為什么它全部適用。 這是因為您必須指定require_tree . 在application.css

Answer 2

在Rails中：嘗試為背景圖像創建一個css類

.splash {
  background-image: image-url("image.jpeg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

如果您希望所有頁面都顯示圖像

<html class="splash"> ... </html>

但僅在一個頁面上，在該視圖頁面上，包裝所有內容

<body class="splash"> ... </body>

Answer 3

您正在覆蓋整個應用程序的正文。 改為創建一個類，並在要顯示背景圖像的頁面上使用div調用它。

此外，您正在調用應用程序布局而不是頁面本身使用樣式表。

Answer 4

樣式表

#app/views/layouts/application.html.erb
<head>
   <%= stylesheet_link_tag controller_name if controller_name == "welcome" && action_name == "home" %>
</head>

#app/assets/stylesheets/welcome.css.scss
body {
   background: {
      image: asset_url("image.png");
   }
}

#config/application.rb
config.assets.precompile += %w(welcome.css)

如果您正在訪問welcome#home視圖，則應加載welcome樣式表。 我強烈建議不要使用類來確定這個頁面 - 包含樣式表更加清晰，因為這將為您提供擴展功能的范圍

-

測試

要對此進行測試，首先應該看一下當您訪問welcome#home視圖時是否正在加載welcome.css 。 為此，您只需right-click > view-source 。

如果存在樣式表，則需要確保樣式正確執行。 調試起來會比較棘手，但只需要查看加載的CSS文件，看看它對頁面上的元素做了什么。

如果您執行上述操作，請評論您是否在源代碼中看到welcome.css 。 如果你是，這是一個好兆頭，我們將能夠在那之后看看CSS

Answer 5

您的welcome.css文件包含在資產管道中，因此將在每個頁面上應用背景。 為了僅在主頁上將背景圖像應用於正文，您需要在顯示主頁時將類應用於正文。

但是，如果您正確使用布局，則打開的<body>標記將位於application.html.erb或者位於home.html.erb不可用的部分中。 你需要它動態添加它，所以我建議你在主頁模板的末尾使用一個小的jQuery腳本。

    <script>$('body').addClass('home-page');</script>

然后你可以修改你的CSS

    body.home-page {
      background: {
        image: asset-url("image.jpg");
      }
    }

這應該會給你你需要的結果。

如何使我的背景圖像僅顯示在rails 4中的一個頁面上？

問題描述

5 個解決方案

解決方案1
2 2014-09-05 16:16:19

解決方案2
2 2016-08-08 20:06:01

解決方案3
0 2014-09-05 16:11:51

解決方案4
0 2014-09-06 09:07:09

解決方案5
-2 2014-09-05 17:41:45

如何使我的背景圖像僅顯示在rails 4中的一個頁面上？

問題描述

5 個解決方案

解決方案1 2 2014-09-05 16:16:19

解決方案2 2 2016-08-08 20:06:01

解決方案3 0 2014-09-05 16:11:51

解決方案4 0 2014-09-06 09:07:09

解決方案5 -2 2014-09-05 17:41:45

解決方案1
2 2014-09-05 16:16:19

解決方案2
2 2016-08-08 20:06:01

解決方案3
0 2014-09-05 16:11:51

解決方案4
0 2014-09-06 09:07:09

解決方案5
-2 2014-09-05 17:41:45