我的背景图片没有在 Heroku 中显示(我没有使用 Ruby 或 Rails)
My background image is not showing in Heroku (I am NOT using Ruby or Rails)
我有一个 project deployed on heroku 没有显示背景图像。图像显示在本地主机上。我曾尝试寻找此问题的解决方案,但我发现的大多数文章都与 Ruby 或 Rails 有关,我既不使用也不熟悉。我的应用程序是一个快速应用程序,我正在使用 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 开发工具样式的屏幕截图 - 原来的 css 被划掉并替换为上面的样式 - 显然 heroku 在后台执行此操作,原始 css 在本地主机上完好无损。如果您转到 url 列出的 (https://blooming-badlands-17631.herokuapp.com/images/female-developer.jpg),图像确实可以毫无问题地提供。
关于堆栈溢出的一个答案建议用 image-url 替换 url,但我想这是 ruby/rails 的事情,因为它破坏了我在本地主机上的项目。另一篇文章说要确保 url 中的大写是正确的,因为它在 Windows 平台上没问题,但是当它被移植到像 Heroku 这样的 linux 平台时,如果它的大写是不正确,所以我也验证了。
这是它应该看起来像的图片
问题是 .hero-background:before
伪元素的 z-index
为 -1,但主体不是透明的。在 localhost 上,我想这没关系,但在 heroku 上它确实如此。
我有一个 project deployed on heroku 没有显示背景图像。图像显示在本地主机上。我曾尝试寻找此问题的解决方案,但我发现的大多数文章都与 Ruby 或 Rails 有关,我既不使用也不熟悉。我的应用程序是一个快速应用程序,我正在使用 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 开发工具样式的屏幕截图 - 原来的 css 被划掉并替换为上面的样式 - 显然 heroku 在后台执行此操作,原始 css 在本地主机上完好无损。如果您转到 url 列出的 (https://blooming-badlands-17631.herokuapp.com/images/female-developer.jpg),图像确实可以毫无问题地提供。
关于堆栈溢出的一个答案建议用 image-url 替换 url,但我想这是 ruby/rails 的事情,因为它破坏了我在本地主机上的项目。另一篇文章说要确保 url 中的大写是正确的,因为它在 Windows 平台上没问题,但是当它被移植到像 Heroku 这样的 linux 平台时,如果它的大写是不正确,所以我也验证了。
这是它应该看起来像的图片
问题是 .hero-background:before
伪元素的 z-index
为 -1,但主体不是透明的。在 localhost 上,我想这没关系,但在 heroku 上它确实如此。