Question

我在我的rails应用程序中使用了background-image属性，我以前使用它，它非常简单并且一直有效，但不知道为什么它现在不工作

body{
    padding: 0;
    margin: 0;
    background-image: url("../assets/mainbanner.jpg");
    background-attachment:fixed;
    background-size:cover;
    font-family: 'Lato', sans-serif;
    display:block;
}

Answer 1

Rails的方法是使用Rails assets helpers来获取资产的正确路径。这还会在网址中添加缓存破坏片段，以避免过时的缓存资产出现问题。

它还允许您稍后切换到资产的内容交付网络（CDN），而无需处理CSS / JS和视图中的硬编码路径。

您可以通过两种方式执行此操作：

1。 ERB（嵌入式Ruby）

将文件的扩展名更改为.css.erb

body {
    padding: 0;
    margin: 0;
    background-image: url("<%= asset_path('mainbanner.jpg') %>");
    background-attachment: fixed;
    background-size: cover;
    font-family: 'Lato', sans-serif;
    display: block;
}

使用扩展名.erb会导致文件通过ERB解释程序发送。这与使用ERB在视图中创建HTML非常相似。

2。 SASS摆幅

确保已安装sass-rails gem，并将文件扩展名更改为.scss。

body {
    padding: 0;
    margin: 0;
    background-image: url(asset_path('mainbanner.jpg'));
    background-attachment: fixed;
    background-size: cover;
    font-family: 'Lato', sans-serif;
    display: block;
}

SASS rails将Rails资产助手映射到SASS功能。然后，SASS编译器在编译样式表时插入正确的URL。

Answer 2

Maku确保你在assets文件夹中有这个background.jpg。试试这段代码

background-image: url(/assets/background.jpg);

Answer 3

将.css文件更改为.scss并尝试此

body{
    padding: 0;
    margin: 0;
    background-image: url(asset_path('mainbanner.jpg'));
    background-attachment:fixed;
    background-size:cover;
    font-family: 'Lato', sans-serif;
    display:block;
}

Answer 4

您可以这样做：

background-image: url('/assets/mainbanner.jpg');

Answer 5

background-image: url('~images/shared/sign-page1.jpg');

为我制作了公开图片

背景图像css不在rails应用程序中工作

5 个答案:

1。 ERB（嵌入式Ruby）

2。 SASS摆幅