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;
    }

我尝试了背景，背景图片，网址，图片网址没有任何效果。可能是一个css问题，我目前正在检查，因为错误的类要求css挂钩，但我不这么认为。

我正在使用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');
}

我刚刚从一个工作项目中提取了这个例子，所以它应该可以正常工作。

设置背景图像css与铁轨

1 个答案: