我的背景图像在Heroku中没有显示(我没有使用Ruby或Rails)

Question

我有一个不显示背景图像的project deployed on heroku。图像正在本地主机上显示。我试着寻找这个问题的解决方案，但我找到的大多数文章都是关于Ruby或Rails的，我既没有使用这两种语言，也不熟悉它们。我的应用程序是一个express应用程序，我正在使用node-sass编译我的scss。

这是pug文件：

extends layout

block custom-styles
    link(rel='stylesheet', href='/css/blocks/gallery.css')
    link(rel="stylesheet", href="/css/blocks/hero.css")
    link(rel="stylesheet", href="/css/blocks/contact.css")
    link(rel="stylesheet", href="/css/font-awesome.min.css")

block nav
    include partials/nav-home

block content
    .hero-background
        include blocks/hero
        include blocks/skills
        include blocks/gallery2
        include blocks/contact

这是英雄css：

/*---hero (block)---*/
#hero-jumbotron {
  height: 100vh;
  width: 100vw;
  background-color: transparent;
  color: white;
  margin: 0;
}

.hero-background {
  overflow: hidden;
  position: relative;
  background: transparent;
  width: 100%;
  /*the psuedo-elemet will-change property added for smooth-scrolling*/ }
  .hero-background::before {
    content: ' ';
    position: fixed;
    background-image: url("/images/female-developer.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 75%;
    background-attachment: fixed;
    z-index: -1;
    will-change: transform;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0; }

.herotext {
  background-color: rgba(5, 5, 5, 0.4); }

下面是该元素的chrome dev工具样式的屏幕截图-原始的css被划掉并替换为它上面的样式-显然heroku在后台做到了这一点，原始的css在本地主机上是巧妙的。如果您转到列出的url (https://blooming-badlands-17631.herokuapp.com/images/female-developer.jpg)，图像确实会得到服务，没有任何问题。

​

​

关于堆栈溢出的一个回答建议用image-url替换url，但我猜这是ruby/rails的事情，因为它破坏了我在本地主机上的项目。另一篇文章说要确保url的大小写是正确的，因为它在Windows平台上是可以的，但是当它被移植到像Heroku这样的linux平台时，如果它的大写不正确，它就会崩溃，所以我也验证了这一点。

这是它应该是什么样子的图像

​

​

Answer 1

问题是.hero-background:before伪元素的z-index为-1，但主体并不透明。在localhost上，我猜这无关紧要，但在heroku上却很重要。