嗯，这是我的第一个问题！
-
我一直在使
background-attachment: fixed;发生在也分配了此属性的<div>上时遇到了问题：-transform: translateZ(-1px) scale(2);。实际上，在第一张幻灯片上，背景图像正在正确呈现，但在其余幻灯片上，图像不可见。 -
此外，当我单击或拖动滚动条时，滚动条不起作用。
我在谷歌上尝试了很多次，已经两天了。最后我尝试了Stackoverflow，因为我无法得到我想要的具体答案。
如果我错过了一些链接，请帮忙并原谅我。
这是我正在制作的页面 - http://mynk-9.github.io/test/
[编辑] 现在，我还添加了代码。
<!DOCTYPE html>
<html>
<head>
<title>Parallax Scrolling Effect</title>
<style>
body {
margin: 0px;
padding: 0px;
}
div.parallax-page {
position: relative;
height: 100vh;
width: 100vw;
overflow-y: auto;
overflow-x: hidden;
perspective: 1px;
-webkit-perspective-origin-x: 50%;
perspective-origin-x: 50%;
}
div.parallax-page > div.group {
position: relative;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div.parallax-page > div.group {
margin-bottom: calc(100vh);
}
div.parallax-page > div.group:last-child {
margin-bottom: -25vh;
}
div.parallax-page > div.group > div.background {
transform: translateZ(-1px) scale(2);
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100%;
/*background-attachment: fixed;*/
}
div.parallax-page > div.group > div.slide {
position: absolute;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255,255,255,0.5);
}
div.parallax-page::-webkit-scrollbar {
/*display: none;*/
}
/* using formula -> scale = 1 + (translateZ * -1) / perspective */
</style>
</head>
<body>
<div class="parallax-page">
<div class="group">
<div class="background" style="background-image: url('sample-wallpaper.svg');"></div>
<div class="slide">
<h1 style="text-align: center;">A magical scroll!!</h1>
</div>
</div>
<div class="group">
<div class="background" style="background-image: url('sample-wallpaper-2.svg');"></div>
<div class="slide">
<h1 style="text-align: center;">A magical scroll!!</h1>
</div>
</div>
<div class="group">
<div class="background" style="background-image: url('sample-wallpaper-3.svg');"></div>
<div class="slide">
<h1 style="text-align: center;">A magical scroll!!</h1>
</div>
</div>
<div class="group">
<div class="background" style="background-image: url('sample-wallpaper-5.svg');"></div>
<div class="slide">
<h1 style="text-align: center;">A magical scroll!!</h1>
</div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-red.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
height: 100%;
color: #777;
line-height: 1.8;
}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
opacity: 0.7;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* First image */
.bgimg-1 {
background-image: url('https://pixabay.com/static/uploads/photo/2016/01/19/17/16/rainbow-background-1149610_960_720.jpg');
min-height: 100%;
}
/* Second image */
.bgimg-2 {
background-image: url("https://i.ytimg.com/vi/4AA4qYGunr4/maxresdefault.jpg");
min-height: 400px;
}
/* Adjust the position of the parallax image text */
.w3-display-middle {bottom: 45%;}
.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}
</style>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<ul class="w3-navbar" id="myNavbar">
<li><a href="#" class="w3-padding-large">HOME</a></li>
<li class="w3-hide-small w3-right">
<a href="#" class="w3-padding-large w3-hover-red"><i class="fa fa-search"></i></a>
</li>
</ul>
</div>
<!-- First Parallax Image with Text -->
<div class="bgimg-1 w3-opacity w3-display-container">
<div class="w3-display-middle">
<span class="w3-center w3-padding-xlarge w3-black w3-xlarge w3-wide w3-animate-opacity">MY <span class="w3-hide-small">WEBSITE</span> LOGO</span>
</div>
</div>
<!-- Container (About Section) -->
<div class="w3-content w3-container w3-padding-64" id="about">
<h3 class="w3-center">ABOUT ME</h3>
<p class="w3-center"><em>I love photography</em></p>
<p>We have created a fictional "personal" website/blog, and our fictional character is a hobby photographer. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!-- Second Parallax Image with Portfolio Text -->
<div class="bgimg-2 w3-display-container">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-light-grey w3-wide">PORTFOLIO</span>
</div>
</div>
<footer class="w3-container w3-theme-dark w3-padding-16">
<p>Powered by <a href="#" target="_blank">csandreas1</a></p>
</footer>
</body>
</html>