我正在尝试在具有全屏图像的两个页面之间进行淡入淡出过渡。目前，我正在尝试使用 swup 插件实现这一目标。
我可以在每个页面上设置一个类来实现一个新的全屏图像，例如：
<!DOCTYPE html>
<html lang="en" class="home_bg">
<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">
<link rel="stylesheet" href="style.css">
<title>Home</title>
</head>
<body>
<nav>
<a href="/index.html">Home</a>
<a href="/about.html">About</a>
</nav>
</body>
</html>
和 css：
*{
margin: 0;
padding: 0;
}
.home_bg {
background: url(img/landscape.jpg) no-repeat center center fixed;
background-size: cover;
}
.about_bg {
background: url(img/ocean.jpg) no-repeat center center fixed;
background-size: cover;
}
nav{
font-size: 24px;
}
用于过渡的 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 defer src="node_modules/swup/dist/swup.min.js"></script>
<script defer src="script.js"></script>
<link rel="stylesheet" href="style.css">
<title>Home</title>
</head>
<body>
<nav>
<a href="/index.html">Home</a>
<a href="/about.html">About</a>
</nav>
<main id="swup" class="transition-fade">
<h1>This is home</h1>
</main>
</body>
</html>
和 css：
*{
margin: 0;
padding: 0;
}
nav{
font-size: 24px;
}
.transition-fade{
opacity: 1;
transition: 500ms;
}
html.is-animating .transition-fade {
opacity: 0;
}
还有一行 js 用于转换：
const swup = new Swup();
我的问题是我似乎无法让这两个一起工作。我要么获得完整的图像页面，要么获得过渡，而不是带有过渡的完整图像页面。问题似乎在于图像必须在"swup"内。但是每次我试图把我的图像放在那里时，我都会失去对它的大小和比例的控制，即使我给它一个自己的类。
现在我已经尝试了无数种事情，我试图谷歌几天，但没有运气。我只一直在使用html，css和js。我应该寻找其他地方吗？
非常感谢这里的任何帮助。
谢谢
我终于设法解决了这个问题。这可能不是最好的解决方案，所以如果您有更好的解决方案，请告诉我们。
我在导航栏下方添加了这个 html 部分：
<main id="swup" class="transition-fade">
<div class="background-parent">
<div class="background-home"></div>
</div>
</main>
在 css 中：
.background-home {
width: 100%;
height: 100%;
background: url(img/landscape.jpg) no-repeat center center fixed;
background-size: cover;
}