如何使我的背景图像仅出现在 rails 4 的一页上？
Posted
技术标签:
【中文标题】如何使我的背景图像仅出现在 rails 4 的一页上？【英文标题】：How to make my background image appear only on one page in rails 4? 【发布时间】：2014-10-30 15:28:08 【问题描述】：我有一张背景图片，我不能只停留在一页上。我制作了一个带有一个主页视图的欢迎控制器来显示它。我也在预编译我的资产。背景显示得很好，但我的目标是在 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 )
【问题讨论】：
【参考方案1】：在 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>
【讨论】：
【参考方案2】：样式表
#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
【讨论】：
感谢您的帮助。我做了以上所有，我的welcome.css在源代码中。背景图像仍然是每一页。 你有我可以看的链接吗？在 Heroku/ 如果您设置一个，将不胜感激！我记得之前回答过你的问题 - 我想一劳永逸地解决这个问题。出现问题 好的，感谢您的帮助，是的，弄清楚这一点令人沮丧。准备好后我会在这里发表评论 您需要帮助吗？【参考方案3】：您的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");
这应该会给您所需的结果。
【讨论】：
【参考方案4】：添加特定的css，
body.welcome
background:
image: asset-url("image.jpg");
在 html 中，
<body class="container welcome">
您一定想知道，即使您没有包含特定文件，那么为什么它会全部应用。这是因为您必须在application.css 中指定了require_tree .
【讨论】：
这对我不起作用。我没有 require_tree 。要么 查看public/assets文件夹中是否有预编译资产。如果是，您可能需要再次编译。
据我所知，我没有 public/assets 文件夹【参考方案5】：
您正在覆盖整个应用程序的主体。改为创建一个类，并在要显示背景图像的页面上使用 div 调用它。
此外，您是从应用程序布局而不是页面本身调用样式表的使用。
【讨论】：
这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。 所以我应该给他/她直接的答案，而不是把他们指向正确的方向？我的回答是创建一个 CSS 类并在页面上调用它。以上是关于如何使我的背景图像仅出现在 rails 4 的一页上？的主要内容，如果未能解决你的问题，请参考以下文章
我的控制器索引视图的背景图像未在 rails 4 应用程序中加载？