如何在视差网站中添加普通背景
如何在视差网站中添加普通背景
提问于 2018-08-08 03:39:40
我试图在这个网站上放一个整体的背景图像，但当我输入的代码在它没有出现，我想这是因为视差图像，有没有办法让背景图像出现。我认为背景图像是其他一切的背后，也许是一种将其向前推进的方法？
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;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-08 04:45:17
在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;
}如果身体的z-index大于视差背景的z-index，则认为身体的背景在顶部。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51734281
复制相关文章
相似问题