嘿伙计们我正在关注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()">☰</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>
&#13;
答案 0 :(得分:0)
将.parallax类的高度更改为100vh而不是100%。