我有一个简单的网站,其中包含4页:首页,关于,画廊和联系方式。 除“关于”以外的所有页面均以全屏图像作为背景。 “关于”页面具有图片和文字的视差效果。
如果我从“关于”页面开始站点,那么一切都会像超级按钮一样运行。但是,如果我从主页(index.html)启动它,则关于页面将不会显示图像。
结构为:
关于页面的外观如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script defer src="node_modules/swup/dist/swup.min.js"></script>
<script defer src="js/script.js"></script>
<title>About</title>
</head>
<body>
<main>
<div id="swup" class="transition-fade">
<div class="wrapper">
<nav>
<a href="/index.html">Home</a>
<a href="/about.html">About</a>
<a href="/gallery.html">Gallery</a>
<a href="/contact.html">Contact</a>
</nav>
<div class="parallax-container"
data-parallax ="scroll"
data-position ="top"
data-bleed-top ="100"
data-image-src ="/img/pic4.jpg"
data-natural-width ="180"
data-natural-height ="80">
</div>
<section>
<div class="content">
<h1 id="about">About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut vero corporis doloremque saepe, eveniet eum quas praesentium culpa? Aliquid fuga mollitia rem reprehenderit necessitatibus consequuntur quos harum autem fugit. Aperiam tempora vitae earum dolorum consectetur? Aperiam, fuga, deserunt dolorem odio libero, quos consequatur perspiciatis nobis qui rem maiores. Error minima dicta ullam quas exercitationem! Optio, sint nulla cumque deserunt dignissimos dolorum exercitationem maxime culpa laborum voluptates nisi, aperiam cupiditate saepe impedit nemo laudantium dolores debitis repellat, numquam voluptatem! Deserunt, dolore autem quibusdam provident tenetur fugiat a vero corporis amet quo ab et, odio magnam facilis omnis commodi corrupti! Repudiandae, expedita.
<br><br>
</p>
</div>
</section>
css:
.parallax-container{
height: 500px;
width: 100%;
}
section{
height: 300px;
}