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

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 资产助手来获取资产的正确路径。 这还会向 url 添加一个缓存破坏片段，以避免陈旧的缓存资产出现问题。

例如，它还允许您稍后为资产切换到内容交付网络 (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-Rails

确保安装了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

玛库确保您在assets文件夹中具有此background.jpg。请尝试此代码

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

Answer 3

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

使用公共图像为我工作

Answer 4

将您的 .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 5

你可以这样做：

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