-1
嗯，这是我的第一个问题！ transform: translateZ(-1px) scale(2); - ：Parallax Scrolling CSS
我在做
background-attachment: fixed;发生在一个<div>这也赋予这个属性是有问题。实际上，在第一张幻灯片中，背景图像正确渲染，但在其他幻灯片上，图像不可见。此外，当我点击或拖动滚动条时，滚动条不起作用。
我在谷歌上试了很多次，已经两天了。最后我尝试了Stackoverflow，因为我无法得到我想要的具体答案。
如果我错过了一些链接，请帮助和原谅我。
这里是我正在做的页面 - http://mynk-9.github.io/test/
[编辑]现在，我还添加代码。
<!DOCTYPE html>
<html>
\t <head>
\t \t <title>Parallax Scrolling Effect</title>
\t \t <style>
\t \t \t body {
\t \t \t \t margin: 0px;
\t \t \t \t padding: 0px;
\t \t \t }
\t \t \t div.parallax-page {
\t \t \t \t position: relative;
\t \t \t \t height: 100vh;
\t \t \t \t width: 100vw;
\t \t \t \t overflow-y: auto;
\t \t \t \t overflow-x: hidden;
\t \t \t \t perspective: 1px;
\t \t \t \t -webkit-perspective-origin-x: 50%;
\t \t \t \t perspective-origin-x: 50%;
\t \t \t }
\t \t \t div.parallax-page > div.group {
\t \t \t \t position: relative;
\t \t \t \t height: 100%;
\t \t \t \t width: 100%;
\t \t \t \t left: 0px;
\t \t \t \t top: 0px;
\t \t \t \t
\t \t \t \t -webkit-transform-style: preserve-3d;
\t \t \t \t transform-style: preserve-3d;
\t \t \t }
\t \t \t div.parallax-page > div.group {
\t \t \t \t margin-bottom: calc(100vh);
\t \t \t }
\t \t \t div.parallax-page > div.group:last-child {
\t \t \t \t margin-bottom: -25vh;
\t \t \t }
\t \t \t div.parallax-page > div.group > div.background {
\t \t \t \t transform: translateZ(-1px) scale(2);
\t \t \t \t position: fixed;
\t \t \t \t top: 0px;
\t \t \t \t left: 0px;
\t \t \t \t width: 100vw;
\t \t \t \t height: 100%;
\t \t \t \t /*background-attachment: fixed;*/
\t \t \t }
\t \t \t div.parallax-page > div.group > div.slide {
\t \t \t \t position: absolute;
\t \t \t \t width: 50%;
\t \t \t \t height: 50%;
\t \t \t \t top: 50%;
\t \t \t \t left: 50%;
\t \t \t \t transform: translate(-50%, -50%);
\t \t \t \t background-color: rgba(255,255,255,0.5);
\t \t \t }
\t \t \t
\t \t \t div.parallax-page::-webkit-scrollbar {
\t \t \t \t /*display: none;*/
\t \t \t }
\t \t \t /* using formula -> scale = 1 + (translateZ * -1)/perspective */
\t \t </style>
\t </head>
\t
\t <body> \t \t
\t \t <div class="parallax-page">
\t \t \t <div class="group">
\t \t \t \t <div class="background" style="background-image: url('sample-wallpaper.svg');"></div>
\t \t \t \t <div class="slide">
\t \t \t \t \t <h1 style="text-align: center;">A magical scroll!!</h1>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="group">
\t \t \t \t <div class="background" style="background-image: url('sample-wallpaper-2.svg');"></div>
\t \t \t \t <div class="slide">
\t \t \t \t \t <h1 style="text-align: center;">A magical scroll!!</h1>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="group">
\t \t \t \t <div class="background" style="background-image: url('sample-wallpaper-3.svg');"></div>
\t \t \t \t <div class="slide">
\t \t \t \t \t <h1 style="text-align: center;">A magical scroll!!</h1>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="group">
\t \t \t \t <div class="background" style="background-image: url('sample-wallpaper-5.svg');"></div>
\t \t \t \t <div class="slide">
\t \t \t \t \t <h1 style="text-align: center;">A magical scroll!!</h1>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </body>
</html>
在'div.parallax页> div.group> div.background'你有'宽度：100vw'重叠到滚动条从而*隐藏*从鼠标。如果您将其更改为“100％”，则滚动条将起作用。否则，Chrome中的背景对我来说显得非常棒。 – Octopus
嘿Mayank，欢迎来到Stack Overflow！你能直接将代码添加到问题中吗？或者至少，代码的“MCVE”？为了获得更好的质量答案，需要包括这个问题 – TylerH
@Octopus我做了你所说的，我把它做成100％而不是100vw，但现在，一个小的如何解决这个问题？我也尝试给'div.parallax-page> div.group> div.background'一个属性'left：-1％'，差距消失了，但是现在差距在左边 –