-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％'，差距消失了，但是現在差距在左邊 –