CSS視差不起作用

Question

大家好，我正在關注W3S教程，我想存檔視差效果。 我已經嘗試了很多次，但我不知道為什么圖片不顯示。
我在另一個項目上做了完全相同的事情，並且效果很好。 我真的不知道我做錯了什么。 我的聲譽在這里有點不好，因為我的“愚蠢問題”，如果這個問題冒犯了我，我感到抱歉。
看一下我的代碼：

 * { margin: 0; padding: 0; } body { margin: 0; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 19px; line-height: 1.6; } #showcase { background-image: url('https://picsum.photos/g/1900/1080?random'); height: 100vh; background-position: center; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; position: top; } .button { background-color: black; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 8px; } .Bshadow:hover { box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); } .pacifont { font-family: 'Pacifico', cursive; font-size: 4.8rem; color: white; } .name { color: #008c06; } .topnav { overflow: hidden; /* background-color: #333; */ border-bottom: 3px solid #008c06; } .sticky { position: fixed; top: 0; width: 100% } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } .active { background-color: #008c06; color: white; } .topnav .icon { display: none; } @media screen and (max-width: 600px) { .topnav a:not(:first-child) { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive { position: relative; } .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } .parallax { /* The image used */ background-image: url("https://picsum.photos/500/1081/?random'"); /* Full height */ height: 100%; width: 100%; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } 

 <header id="showcase"> <div class="topnav sticky" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> </div> <h1 class="pacifont">Welcome <a class="name">Felix!</a></h1> <a href="#" class="button Bshadow">READY?</a> </header> <a class="weatherwidget-io" href="https://forecast7.com/en/50d854d35/brussels/" data-label_1="Bruxelles" data-font="Jura" data-icons="Climacons Animated" data-days="3" data-theme="gray">Bruxelles</a> <h1>wtf</h1> <div class="parallax"></div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus odit dolorum sed ut, doloremque consectetur.</p> 

Answer 1

將.parallax類的高度更改為100vh，而不是100％。