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视图，则应加载welcome#home样式表。我强烈建议反对使用类来确定这个页面 - 包含样式表更加清晰，因为这将为您提供扩展功能的范围

-

<强>测试

要对此进行测试，您应首先查看当您点击welcome.css视图时是否正在加载welcome#home。为此，您只需要right-click＆gt; view-source。

如果存在样式表，则需要确保样式正确执行。调试起来会比较棘手，但只需要查看加载的CSS文件＆amp;看看它对你网页上的元素做了什么。

如果您执行上述操作，请评论您是否在源中看到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 个答案: