如何使我的背景图像仅显示在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