视差效果在 Firefox 中不起作用
Parallax effct not working in 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;
}
所以首先,我不是专业编码员,但我有 一些 经验。我正在尝试做一个现代漂亮的视差网站。所以我的问题是背景中的图像在 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 thebody{}
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; }