在rails 4应用程序中为一个页面使用背景图片？

我想给我的意见之一背景图像。我已经找到了关于如何做到这一点的铁轨三的信息，但它似乎并没有为我工作。这里是链接到我使用的信息：http://makandracards.com/makandra/2977-declare-different-css-background-images-for-different-locales 在rails 4应用程序中为一个页面使用背景图片？

这里是我的welcome.css.scss：

.container { 
background-image: url(images/image.jpg) 

    }

这里是欢迎/ home.html.erb：

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

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

</body> 

</html>

来源

2014-09-04 dobsoft

你确定你的'图片'网址有效吗？ – ForgetfulFellow 2014-09-04 05:37:08

首先，你将不再需要以确定body标签的类 - 只需要调用你的CSS body（并重写为您的特定页面想上的背景图像）

其次，您需要使用asset_path helpers：

#app/assets/stylesheets/application.css.sass 
body 
    background: 
    image: asset-url("image.jpg")

这是“正确”的方式来调用此方法，因为如果你使用.erb或其他任何其他方法与asset pipeline，您运行丢失功能的风险，当你预编译的资产进行生产

诀窍是使用rails资产preprocessors允许为您的资产使用dynamic路径。路径将根据您是动态使用资产还是静态使用（in production）

考虑到您在/assets/images文件夹中有image.jpg，上面的代码应该适合您。该SCSS版本是：

#app/assets/stylesheets/application.css.scss 
body 
{ 
    background: { 
    image: asset-url("image.jpg"); 
    } 
}

更新

您可以拨打欢迎的CSS是这样的：

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

来源

2014-09-04 11:18:48

CSS版本出现错误，表示它在“背景”之后期待伪类或其他东西。 SCSS版本虽然完美，但谢谢。 – dobsoft 2014-09-04 13:15:23

我刚刚意识到这一点，背景图片仍然在我的其他网页上。我故意让我的欢迎控制器只有主页，因为这是我想要的唯一页面。我该如何解决这个问题，我把SCSS代码放在welcome.css.scss – dobsoft 2014-09-04 14:37:24

你只想调用'welcome.css.scss'文件，当你想要背景作为图像时。我会为你更新 – 2014-09-04 14:50:58

CSS文件命名

welcome.css.scss - > welcome.css.scss.erb

内容

background-image: url("<%=image_path('image.jpg')%>");

来源

2014-09-04 06:56:10

这不会在Rails中被识别为有效的文件。你能详细说明吗？我从来没有听说过为scss扩展添加erb扩展。 – Jubl 2016-06-02 16:32:47

-1

请更新你的CSS文件

.container{ 
    background-image: url("/assets/tooltip.png") 
}

来源

2014-09-04 07:30:25

我知道这个问题是一年以前，但没有任何答案对我有帮助，因此我在管理背景图像方面想出了更多非正统的东西。

<% if action_name === "homepage" %> 
    <body class="body-change"> 
<% else %> 
    <body> 
<% end %>

然后在css.scss你可以有这样的：

.body-change { 
    background: red; 
}

所以我使身体得到一定的阶级，如果条件得到满足。因此，如果我在主页上，则主体的类将是其他内容，然后我可以在CSS/SCSS中为该类添加详细信息。我希望这可以帮助某人，因为它对我有用。如果您有多个具有相同名称的操作，则还可以通过指定controller_name来使if语句更具体。

来源

2016-06-02 16:44:13 Jubl

在rails 4应用程序中为一个页面使用背景图片？

回答

相关问题