Spree 3.1 .spree-header 背景图像的 CSS 路径答案

【问题标题】：Spree 3.1 CSS path for .spree-header background-imageSpree 3.1 .spree-header 背景图像的 CSS 路径
【发布时间】：2016-11-11 04:16:11
【问题描述】：

在 Spree 3.1 标准主题中（开箱即用）

我尝试更改背景图像。但不起作用。也许路径是错误的。帮助需要。这就是我所做的。

上传图片为/app/assets/images/NewBackGroundImage.png
在vendors/assets/stylesheets/spree/frontend/custom.css中添加css

CSS：

.spree-header{
    background-image: url("/assets/images/NewBackGroundImage.png");
    background-size: cover;
    margin-bottom: 10px;
}

这是我对当前页面的检查

这部分是我附加的屏幕截图，用于我对以下答案的评论。

在检查屏幕上，它清楚地显示错误 404（未找到）

然后尝试更改为使用asset-url

SCSS：

然后将我的 custom.css 更改为 custom.scss

这是检查镜头，现在可以使用了

【问题讨论】：

既然你已经写了css 样式，所以不需要保存在vendor 目录中
你好魔术师。我尝试放入 /app/assets/images/stylesheets/custom.css 但不起作用。（背景和图像）
你引用图像的方式是错误的.. inn SCSS 你有像asset-url(asset_name) 这样的辅助方法，请参阅此寻求帮助rubydoc.info/github/petebrowne/sprockets-sass/master/Sprockets/…
我尝试将 spree_header.jpg 放入目录并将行更改为背景：#444444 asset_url('spree_header.jpg');还是不行
试试asset-url而不是asset_url

标签： css spree

【解决方案1】：

正如我所见，您的页面根本没有使用您的样式。你确定 div 标签有类“spree-header”。因为在您的浏览器中，它只有 id “spree-header”，而与相应的类无关。尝试将其从.spree-header 替换为#spree-header。如果样式之间可能会发生冲突，那么您可以随时尝试使用!important标签：url(...) !important;

如果文件夹“vendors”在“app”文件夹中，那么也可以使用相对路径url("../../../../../assets/images/NewBackGroundImage.png")

【讨论】：

谢谢奥列格。在我更改为#spree-header 背景颜色工作后，图像仍然没有显示。在 Chrome=>inspect Styles 处（如附件所示，如果我关闭我的#spree-header 的背景，那么原来的 Spree 3.1 会变回蓝色背景，这意味着 #spree-header 是正确的，但 url 不起作用。
终于成功了： 1. 将 .spree-header 更改为 #spree-header （在我的情况下） 2. 将 custom.css 更改为 custom.scss 和 3. 将asset-url 用于图片路径 Big谢谢魔术师