html - 视差效果在 Firefox 中不起作用

首先，我不是专业编码人员，但我有一些经验。我正在尝试做一个现代漂亮的视差网站。所以我的问题是背景中的图像在 Firefox 中不显示，但在 Chrome 中显示，我希望它在两者中都能工作。这是我的代码:

//No js yet

#welcome {
  font-family: 'Nunito', sans-serif;
  font-size: 80px;
  margin: 0px;
  color: #000;
  font-family: 'Slabo 27px', serif;
  background-color: #D5D5D5;
  height: 1000px;
  text-align: center;
  vertical-align: middle;
  line-height: 1000px;
  text-shadow: 0px 0px 10px grey;
  border-top: 1px solid black;
}

body {
  background-color: #000;
  font-family: 'Slabo 27px', serif;
  padding: 0px;
  margin: 0px;
}
#parallax {
	  background-image: url("http://wp.widewallpapers.net/4k/cities/new-york/3840x2160/New-York-3840x2160-001.jpg");

    min-height: 100%; 
	margin: 0px;

    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

<html>
<head>
  <link rel="stylesheet" href="style.css"/>
  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
  <meta content="-1" http-equiv="expires"></meta>
  <meta content="text/html; charset=utf-8" http-equiv="content-type"></meta>
 </head>
<body>
<div id="parallax"></div>
<center><p align="center" id="welcome">Welcome To My Website!</p></center>
</body>
</html>

因此，如果您复制所有内容并在 chrome 中尝试它，它可以工作(我认为对每个人都是如此)，但它在 Firefox 中不起作用。帮助!

最佳答案

Simple and easy fix is to add the height: 100% to the body{}

  body {
    background-color: #000;
    font-family: 'Slabo 27px', serif;
    padding: 0px;
    margin: 0px;
    height: 100%;
}

Additional options:

将 min-height 更改为 height。

#parallax {
   background-image: url("http://wp.widewallpapers.net/4k/cities/new-  york/3840x2160/New-York-3840x2160-001.jpg");
   height: 100%; 
   margin: 0px;
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

将 min-height: 100% 更改为 min-height: 580px;(或任何像素你想要的)。

#parallax {
   background-image: url("http://wp.widewallpapers.net/4k/cities/new-  york/3840x2160/New-York-3840x2160-001.jpg");
   min-height: 580px; //or whatever pixel you want... 
   margin: 0px;
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

关于html - 视差效果在 Firefox 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41876549/

html - 视差效果在 Firefox 中不起作用

上一篇：javascript - Bootstrap 模态在滚动时自动关闭

下一篇：javascript - 有人能告诉我我对 HTML/JS 代码的解释是否正确吗？