css - 使用 rails 设置背景图像 css

Question

我有一个名为 item8 的图像正在我的网页上呈现，CSS 看起来像这样。这是在 css.sass 文件中

.body-detail-intro {
    background: url(/assets/item8-45411322696feaa47a0345b3e4bdd5de1b2cff8243c534b84a83a8d4d732ec0d.png)  no-repeat;
    background-size: cover;
    background-position: center;

    height: 55vh;
    position: center;
    color: white;
  }

我不确定图像路径上的散列来自何处，因为图像刚刚命名为 item-8。当我删除散列并仅使用 item-8 时，图片仍会加载。

现在输入这张图片 Suitsandtables_HowitWorks.png

下面的代码不适用于 Suitsandtables_HowitWorks.png 我还尝试了另一张我已经在我的网站上名为 team-1 的图片，但仍然不起作用

 .middle .right{
      background: image-url("/assets/team-1.jpg") no-repeat;
      background-size: cover;
      background-position: center;
      height: 600px;
      width: 300px;
    }

我试过 background、background-image、url、image-url 都没有用。可能是我目前正在检查的 css 问题，因为在错误的类中要求 css Hook ，但我不这么认为。

我正在使用 css.sass

Answer 1

该哈希来自 rake assets:precompile，它在生产中默认运行，因此您的服务器或您使用的 CDN 能够缓存它。

Sprockets 将在幕后为您处理该哈希。

我的文件扩展名只有 .scss，但这不重要。

.your-class {
  // Note i'm using only the image name. No path
  background-image: image-url('my_image.jpg');
}

我刚刚从一个工作元素中提取了这个示例，所以它应该可以正常工作。