视差效果不适用于某些页面

时间：2017-07-28 08:31:19

标签： html css twitter-bootstrap

我目前正在制作一个网站，但我遇到了一些麻烦。我的一个页面目前对它有视差效果。我试图将相同的效果应用到另一个页面（第三页），由于某种原因它不适用于该页面。我想知道是否有人知道为什么我的方法不起作用？

CSS和HTML

＆＃13;
＆＃13; 
body{
  background-color: teal;
  font-family:Orbitron;
  color:white;
}

.fa-stack-overflow{
color: #f48024
}

.fa-github{
color:rgb(102,43,129);
}

.fa-linkedin{
color:rgb(0,127,178);
}

.fa-facebook-official{
color:rgb(59, 89, 153);
}

.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
}


.block{
  background-color: #337ab7;
  padding:10px;
  width:50%;
  margin-right: auto;
  margin-left: auto;
  border-radius:5px;
}


h1{
  padding:0;
margin-top: 0px;
font-size: 5.0em;
}

.btn-default{
font-size:1.7em;
color:#337ab7;
}


.pageOne{
  background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  background-repeat: none;
  background-size: cover;

  height: 1000px;

}

/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}



/*
parallax effect end
*/

.pageTwo{
background: teal;
background-repeat: none;
background-size: cover;
height: 400px;
padding-top: 5%;
}

.pageTwoblock{
border-radius:5px;
}

p{
  font-size: 1.8em;
}

.me{
height: 850px;
  display:block;
  margin-right: auto;
  margin-left: auto;

}

.pageThree{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
padding-top:5%;
}

.container{
  width:80%;
  margin:auto;
  overflow:auto;
}

section{
  padding:20px 0;
  overflow:hidden;
}

#gallery{
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#gallery li{
  display: block;
  float: left;
  width: 23%;
  cursor: pointer;
  border: 5px;
  box-sizing: border-box;
  margin: 0 12px 7px 0;
  position: relative;
}

#gallery img{
  width:100%;
  border-radius:5%
}



.pageFour{
  background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  background-repeat: none;
  background-size: cover;
height: 1000px;
padding-top:5%;
}
＆＃13; 
<!DOCTYPE html>

<html>
  <head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/font-awesome.min.css">
<script src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">

</head>
<body>
<div class="pageOne text-center">
  <ul class = "nav nav-pills">
<li>
  <a href="#">Daniel Collins</a>
</li>
<li class="pull-right">
  <a href="#p4">Contact Me</a>
</li>
<li class="pull-right">
  <a href="#p3">Portfolio</a>
</li>
<li class="pull-right">
  <a href="#p2">About Me</a>
</li>
</ul>

<div class="block text-center">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Web Projects</h2>
</div>
<div class = "btnList text-center">
  <a class = "btn btn-default" href="https://stackoverflow.com/users/7024823/daniel"><i class="fa fa-stack-overflow"  aria-hidden="true"></i>Stack Overflow</a>
  <a class = "btn btn-default" href="https://github.com/casteyes"><i class="fa fa-github"  aria-hidden="true"></i>GitHub</a>
  <a class = "btn btn-default" href="https://www.linkedin.com/in/daniel-collins-927b1ab0/"><i class="fa fa-linkedin"  aria-hidden="true"></i>Linkedin</a>
  <a class = "btn btn-default" href="https://www.facebook.com/daniel.p.collins1"><i class="fa fa-facebook-official"  aria-hidden="true"></i>Facebook</a>
</div>
</div>
<div class= "pageTwo text-center" id="p2">
<div class= "pageTwoblock">
<div class="row">
<div class ="text-center">
      <h1>Daniel Collins</h1>
      <p class"text-center">
        I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
         different areas of web development from back end programming (PHP, C#, Java) to front end engineering
         (HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
      </p>
    </div>
    </div>
    </div>
    </div>
<div class= "pageThree" id="p3">
<header>
<div class="block text-center">
  <h1 class = "logo">Portfolio</h1>
</div>
</header>
<section>
<div class="container>
  <h1 id="heading">All Projects</h1>
  <ul id="gallery">
    <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
    <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
    <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
    <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
    <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
    <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
    <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"</li>
    <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"</li>
  </ul>
</div>
</section>
</div>
<div class= "pageFour text-center" id="p4">

</div>
   </body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

请检查一下。背景附件：固定;其他div没有。

body{
  background-color: teal;
  font-family:Orbitron;
  color:white;
}

.fa-stack-overflow{
color: #f48024
}

.fa-github{
color:rgb(102,43,129);
}

.fa-linkedin{
color:rgb(0,127,178);
}

.fa-facebook-official{
color:rgb(59, 89, 153);
}

.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
}


.block{
  background-color: #337ab7;
  padding:10px;
  width:50%;
  margin-right: auto;
  margin-left: auto;
  border-radius:5px;
}


h1{
  padding:0;
margin-top: 0px;
font-size: 5.0em;
}

.btn-default{
font-size:1.7em;
color:#337ab7;
}


.pageOne{
  background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  background-repeat: none;
  background-size: cover;

  height: 1000px;

}

/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}



/*
parallax effect end
*/

.pageTwo{
background: teal;
background-repeat: none;
background-size: cover;
height: 400px;
padding-top: 5%;
background-attachment: fixed;
}

.pageTwoblock{
border-radius:5px;
}

p{
  font-size: 1.8em;
}

.me{
height: 850px;
  display:block;
  margin-right: auto;
  margin-left: auto;

}

.pageThree{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
padding-top:5%;
background-attachment: fixed;
}

.container{
  width:80%;
  margin:auto;
  overflow:auto;
}

section{
  padding:20px 0;
  overflow:hidden;
}

#gallery{
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#gallery li{
  display: block;
  float: left;
  width: 23%;
  cursor: pointer;
  border: 5px;
  box-sizing: border-box;
  margin: 0 12px 7px 0;
  position: relative;
}

#gallery img{
  width:100%;
  border-radius:5%
}



.pageFour{
  background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  background-repeat: none;
  background-size: cover;
height: 1000px;
padding-top:5%;
background-attachment: fixed;
}
<!DOCTYPE html>

<html>
  <head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/font-awesome.min.css">
<script src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">

</head>
<body>
<div class="pageOne text-center">
  <ul class = "nav nav-pills">
<li>
  <a href="#">Daniel Collins</a>
</li>
<li class="pull-right">
  <a href="#p4">Contact Me</a>
</li>
<li class="pull-right">
  <a href="#p3">Portfolio</a>
</li>
<li class="pull-right">
  <a href="#p2">About Me</a>
</li>
</ul>

<div class="block text-center">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Web Projects</h2>
</div>
<div class = "btnList text-center">
  <a class = "btn btn-default" href="https://stackoverflow.com/users/7024823/daniel"><i class="fa fa-stack-overflow"  aria-hidden="true"></i>Stack Overflow</a>
  <a class = "btn btn-default" href="https://github.com/casteyes"><i class="fa fa-github"  aria-hidden="true"></i>GitHub</a>
  <a class = "btn btn-default" href="https://www.linkedin.com/in/daniel-collins-927b1ab0/"><i class="fa fa-linkedin"  aria-hidden="true"></i>Linkedin</a>
  <a class = "btn btn-default" href="https://www.facebook.com/daniel.p.collins1"><i class="fa fa-facebook-official"  aria-hidden="true"></i>Facebook</a>
</div>
</div>
<div class= "pageTwo text-center" id="p2">
<div class= "pageTwoblock">
<div class="row">
<div class ="text-center">
      <h1>Daniel Collins</h1>
      <p class"text-center">
        I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
         different areas of web development from back end programming (PHP, C#, Java) to front end engineering
         (HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
      </p>
    </div>
    </div>
    </div>
    </div>
<div class= "pageThree" id="p3">
<header>
<div class="block text-center">
  <h1 class = "logo">Portfolio</h1>
</div>
</header>
<section>
<div class="container>
  <h1 id="heading">All Projects</h1>
  <ul id="gallery">
    <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
    <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
    <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
    <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
    <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
    <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
    <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"</li>
    <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"</li>
  </ul>
</div>
</section>
</div>
<div class= "pageFour text-center" id="p4">

</div>
   </body>
</html>

相关问题
最新问题