CSS 背景图像未显示 CSS HAML

Posted 2023-03-13

【中文标题】CSS 背景图像未显示 CSS HAML

【英文标题】：CSS Background Image not showing up CSS HAML

【发布时间】：2015-07-10 20:09:46

【问题描述】：

我在一个样式表中有一个背景图片 url，我正在尝试为我的索引页面中的标题呈现它。该图像位于 assets/images 文件夹中。我尝试放入供应商/资产/图像，但它也没有从那里渲染。

views/splash/index.html.haml：

%section.row.header-bg
  .row
    .col-md-6.col-md-offset-1

资产/样式表/splash.css.scss：

.header-bg
    background-image: url('bg.png');

编辑：我尝试了所有我能想到的图片 URL 变体，但到目前为止没有运气。

【问题讨论】：

尝试使用开发工具检查呈现的 HTML 中的元素。您可以查看规则是否被应用，是否被某些东西覆盖，或者是否找不到图像

@redbmk 我收到 404 not found 错误。该网址正在查看 images/bg.png

您是否尝试过将图像更改为使用绝对路径？例如background-image: url('/assets/images/bg.png');

【参考方案1】：

请尝试这样它会起作用：

背景图片：image-url('bg.png');

【讨论】：

那行不通。检查元素显示它呈现一个 text/hml 类型。

什么意思？ @user3462905

我认为您只是将 css 属性 background-image 更改为不是您的问题的背景，而您的主要问题是图像路径不正确。

【参考方案2】：

问题解决了。正确的 CSS：

.header-bg
  background: image-url('bg.png') no-repeat;

【参考方案3】：

尝试这样做：希望这可以帮助你！

background-image: url('images/bg.png');

or
background-image: url('assets/images/bg.png');

【讨论】：

尝试做：background-image: url('.../assets/images/bg.png');

或背景图片：url('/assets/images/bg.png');

我仍然得到 ActionController::RoutingError (没有路由匹配 [GET] "/assets/images/bg.png")

【参考方案4】：

看起来您正在将图像定位到您的 css 文件夹。 假设您的图像和样式表文件夹包含在您的供应商/资产文件夹中 - 您将需要向上导航一级。

尝试使用 ../ 作为 url 前缀

background-image: url('../images/bg.png');