如何使我的背景图像仅显示在rails 4中的一个页面上？

Question

I have a background image that I can not get to stay just on one page. 我有一张背景图片，我不能只留在一页上。 I have made a welcome controller with one home view to display it. 我已经制作了一个带有一个主视图的欢迎控制器来显示它。 I am precompiling my assets as well. 我也在预编译我的资产。 The background shows up just fine, but my goal is to just show the background image on my home.html.erb view. 背景显示很好，但我的目标是在home.html.erb视图中显示背景图像。

welcome/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>

welcome controller: 欢迎控制器：

class WelcomeController < ApplicationController
 def home
 end
end

stylesheets/welcome.css.scss: 样式/ welcome.css.scss：

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

and I have the following in my application layout: 我的应用程序布局中有以下内容：

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

and in config/initializers/assets.rb : 在config / initializers / assets.rb中：

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


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

Answer 1

Add specific css, 添加特定的CSS，

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

and in html, 在HTML中，

 <body class="container welcome">

You must be wondering even though you have not included specific file then why it is applying all over. 你必须想知道，即使你没有包含特定的文件，那么为什么它全部适用。 This is because you must have specified require_tree . 这是因为您必须指定require_tree . in application.css 在application.css

Answer 2

In Rails: Try creating a css class for the background image 在Rails中：尝试为背景图像创建一个css类

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

If you want all pages to display the image 如果您希望所有页面都显示图像

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

But on one page only, on that view page, wrap everything in 但仅在一个页面上，在该视图页面上，包装所有内容

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

Answer 3

You are overriding body for the entire application. 您正在覆盖整个应用程序的正文。 Make a class instead and call it using div on the page you want to display the background image. 改为创建一个类，并在要显示背景图像的页面上使用div调用它。

Also, you are calling the use of the stylesheet from the application layout rather than the page itself. 此外，您正在调用应用程序布局而不是页面本身使用样式表。

Answer 4

Stylesheet 样式表

#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)

This should load the welcome stylesheet if you're visiting the welcome#home view. 如果您正在访问welcome#home视图，则应加载welcome样式表。 I would strongly recommend against using classes to determine this page - it's far cleaner to include a stylesheet, as this will give you scope to extend the functionality as you wish 我强烈建议不要使用类来确定这个页面 - 包含样式表更加清晰，因为这将为您提供扩展功能的范围

-- -

Test 测试

To test this, you should first look at whether your welcome.css is being loaded when you hit the welcome#home view. 要对此进行测试，首先应该看一下当您访问welcome#home视图时是否正在加载welcome.css 。 To do this, you just need to right-click > view-source . 为此，您只需right-click > view-source 。

If the stylesheet is present, you'll want to ensure your styling is performing correctly. 如果存在样式表，则需要确保样式正确执行。 This will be trickier to debug, but will just entail you looking at the loaded CSS file & seeing what it's doing with the elements on your page. 调试起来会比较棘手，但只需要查看加载的CSS文件，看看它对页面上的元素做了什么。

If you do the above, comment as to whether you're seeing the welcome.css in your source. 如果您执行上述操作，请评论您是否在源代码中看到welcome.css 。 If you are, it's a good sign, and we'll be able to look at the CSS after that 如果你是，这是一个好兆头，我们将能够在那之后看看CSS

Answer 5

Your welcome.css file is being included by the asset pipeline so will apply the background on every page. 您的welcome.css文件包含在资产管道中，因此将在每个页面上应用背景。 In order to apply the background image to the body only on the home page, you need to apply a class to the body when the home page displays. 为了仅在主页上将背景图像应用于正文，您需要在显示主页时将类应用于正文。

However, if you are correctly using layouts, the opening <body> tag will be in your application.html.erb or in a partial so not available in your home.html.erb . 但是，如果您正确使用布局，则打开的<body>标记将位于application.html.erb或者位于home.html.erb不可用的部分中。 You will need it to add it dynamically so I suggest you use a small jQuery script at the end of your home template. 你需要它动态添加它，所以我建议你在主页模板的末尾使用一个小的jQuery脚本。

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

Then you can amend your CSS to 然后你可以修改你的CSS

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

That should give you the results you require. 这应该会给你你需要的结果。

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