html - 在 Rails 4 中添加背景图片

Question

如何在 Rails 4 中包含背景图片？我正在尝试将它添加到我的 HTML 中的一个 div 中。目前，图像位于我的 /assets/images 目录中。

HTML:

<header>
  <div class="background_image">

  </div>
</header>

CSS:

.background_image {
    background: url(/assets/header-bg.jpg);
}

使用我目前的代码，没有显示任何图像

Answer 1

首先，您需要在CSS 文件中添加SCSS 扩展名，例如main.css.scss。

有了它，您可以使用 asset helpers ，比如:

.background_image {
    background: image-url('header-bg.jpg');
}

如文档中所述，image-url("header-bg.jpg") 变为 "url(/assets/header-bg.jpg)" .

您的标记当前为空 (div.background_image)，因此您需要向样式添加一些 height 以使其正常工作。

<header>
    <div class="background_image">
        <!-- no content -->
        <!-- add some content or specify some height -->
    </div>
  </header>

注意:要完成所有这些工作，您必须使用 sass-rails gem (it's default in rails 4)。