我想在这个网站上放一张整体背景图片，但是当我在里面输入代码时，它没有出现，我想这是因为视差图像，有没有办法让背景图片出现。我认为背景图像在其他所有内容的背后，也许是一种将其向前推进的方式？
HTML:
<html>
<head>
<title>Croydon Cycles</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="style.css" rel= "stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<body >
<div class="title">
<img src="images/Logo.png" alt="Croydon Cycles" align="center">
</div>
<div class="menu">
<nav id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="location.html">Location</a></li>
</ul>
</nav>
</div>
<div class="container">
<div class="parallax" data-parallax="scroll" data-z-index="1">
<div class="b1">
<a href="shop.html">
<input type="button" class="button" value="view all bikes" >
</a>
</div>
</div>
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
<div class="profiles">
<p id="Header-1">Here are some of the members of Croydon Cycles:</p>
<div class="pic-1">
<img src="images/profile-1.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
<div class="pic-2">
<img src="images/profile-2.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background: url(background.jpg);
background-position: center;
background-repeat: no-repeat;
display: block;
}
p {
font-family: 'Karla', sans-serif;
margin: 2.5%;
padding:0;
}
.title {
text-align: center;
}
.container {
margin: 0 auto;
background: #f9f9f9;
font-size: 24px;
object-fit: cover;
}
.parallax {
background: url('images/background-1.jpeg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 400px;
min-height: 400px;
}
.b1{
text-align: center;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: absolute;
top: 92%;
left: 42.5%;
}
.pic-1{
height:280px;
width:420px;
float: left;
padding-left: 100px;
}
.pic-2{
height:280px;
width:420px;
float: right;
padding-right: 100px;
}
#Header-1 {
font-family: 'Lobster', cursive;
font-size: 35px;
}
ul {
margin: 0 auto;
width: 350px;
}
ul li{
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a{
display: block;
text-decoration: none;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: #1e1e1e;
padding:0px 20px;
}
#nav {
width:100%;
height:80px;
background-color:#fff;
}
最佳答案
在您的 CSS 中添加 z-index 以更改顺序:
body {
width: 100%;
height: 100%;
background: url(background.jpg);
background-position: center;
background-repeat: no-repeat;
display: block;
z-index: 1;
}
.parallax {
background: url('images/background-1.jpeg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 400px;
min-height: 400px;
z-index: -1;
}
如果 body 的 z-index 大于视差背景的 z-index，则 body 背景将被认为在顶部。
关于html - 如何在视差网站中添加正常背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51734281/