html - 视差效果在某些页面上不起作用-6ren

html - 视差效果在某些页面上不起作用

转载作者：太空宇宙更新时间：2023-11-04 08:23:23

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

CSS 和 HTML

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%;
}

<!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>

最佳答案

请检查这个。背景附件:已修复；其他 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>

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

文章推荐： css - 在 rel 属性中提到的样式表中大写 A

文章推荐： android - 如何启用放大元标记？

文章推荐：六边形的 CSS 网格 - 在移动分辨率下显示为正方形

javascript - 视差/背景位置的特征检测
好的，所以我已经创建了自己的视差 jQuery/JS 脚本，但我只是不知道如何定位支持以下内容(需要以下内容)的浏览器: 支持背景位置的转换我正在尝试的站点(预览)是: My Test Site 我
jquery - 背景覆盖+视差
我正在制作带有固定背景和封面的整页。当我添加视差时 - 动画看起来不错，但它滞后太多，我不知道为什么。我有一台很好的 PC，所以这不是这个问题，我之前让其他人产生了视差，这并不滞后。有什么解决办法
html - 汉堡菜单+视差
我有一个奇怪的组合 - 视差和汉堡菜单。问题是米导航会在您悬停的任何地方下降，不仅当您将鼠标悬停在汉堡菜单图标上时。我认为这是一个厚厚的错误代码，但我找不到它。我没有 jquery 的。还有，我
javascript - 视差-元素毛刺
因此，我一直在努力围绕这种名为“视差”的整洁效果。基本上，背景滚动比前景元素慢。我发现这个新的“技巧”正在起作用。随着滚动的进行，更改top属性以创建视差效果。问题... 因此，为了提高性能并减轻
html - 视差+固定菜单问题
我的导航栏在 CSS 中加入视差效果后无法保持固定。我在我的网站上放置了一个带有过渡 JS“Math.round($(window).scrollTop()) > 490)”的固定导航栏。之后，我
javascript - 视差，作为主页横幅
这是一个非常模糊的问题，但我不确定从哪里开始，所以如果有人能给我一些想法，那你就太好了。我想在我的网站主页上使用视差效果，但我不确定如何创建这种效果。我想要的效果在这里装箱http://davega
jquery - 视差 slider
我使用了本教程中的视差脚本 http://tympanus.net/codrops/2011/01/03/parallax-slider/ 我在这里发布了一个 fiddle http://jsfidd
javascript - 滚动时如何让div改变不透明度？ (视差)
我想知道如何创建视差滚动效果之类的东西。向下滚动得越远，div 变得越不透明，在某个点之后，它又开始变得更加透明。我知道需要 JS/JQuery 才能做到这一点。谁能给我一个简单的方法来实现这个目标？
javascript - 使元素滚动更慢(视差)
我的页面上有一个元素是绝对定位的。我正在尝试编写一段 jQuery 代码，使该元素的滚动速度比页面上其他元素的滚动速度慢。到目前为止，我已经写了这篇文章，但似乎根本无法让它发挥作用。有没有人有这方
iphone - Sprite 上的无限滚动(视差)
我是 cocos2d 世界的新手，我正在开发我的第一个教程并面临一个问题我的问题是我有一个图像(1024 X 320)并且我的方向是横向我需要从右到左连续移动该图像为此目的我使用了 Ray 的太空射击
javascript - 简单的 jQuery 视差
我需要调试此 jQuery 的帮助，其中我操纵容器中元素的上边距，该容器具有固定大小并将溢出设置为隐藏，以便我可以创建视差效果。视差有效，但如果您向下滚动一个像素，然后重新加载页面，它就会中断。谁能帮
html - 制作一个 Div 视差
我有一个 div，我想留在原地，这样导航栏和其他部分就可以通过它。这是我目前的工作:
css - 带有粘性标题问题的纯 CSS3 视差
我建了一个网站，页面很长。我们决定使用纯 CSS3 为它添加视差并且它起作用了。我从这里得到的 CSS3 视差代码: codepen.io/keithclark/pen/JycFw 后来，我们决定应
javascript - 视差 "scrolling"只能通过导航
由于我对 Javascript/Jquery/HTML5/CSS3 还是个新手，我想我应该问一个问题给你们这些更有经验的程序员。我有点卡在我的程序逻辑的开头。我想做一个具有视差“滚动”效果的网站，但
javascript - 找出(视差？)滚动效果
已关闭。此问题旨在寻求有关书籍、工具、软件库等的建议。不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，
opencv - 计算距离(视差)OpenCV
-- 更新 2 -- 如果您使用单个相机计算距离，下面的文章非常有用(尽管它使用的是 Python 而不是 C++):Find distance from camera to object/marke
javascript - 视差 - 由于绝对定位，页面末尾不可见
我有一个使用 skrollr 构建的视差网站在我到达页面末尾之前效果很好。我想要一个成为您可以在页面上滚动的最后/最远点。目前，如果我在大屏幕上查看时会留下巨大的空白，或者我无法进一步向下滚动以在
css - 视差(相对)层组相互重叠
我不明白为什么会这样:我有: https://jsfiddle.net/d5jehq02/1 background forefront 我正在
android - 滚动时的 Imageview 视差
我看到很多例子说明视差背景当你滚动或 ListView 视差但是我找不到一个清楚的例子如何在你滚动 Activity 时对图像实现视差效果。可以在 Airbnb 应用程序中找到示例实现。向下滚动时，
html - 视差 css 背景图像移动一点
我的背景图片来自background-url，我的视差适用于我放置的图片:background-attachment: fixed; 我怎样才能让背景图片在我滚动时稍微移动一点？这是我正在谈论的例子

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 视差效果在某些页面上不起作用