我昨天创建了一个视差效果，觉得效果很好。今天，我调整了浏览器的大小，看到我使用的图片重复出现。没有一次重复毁掉了整件事。
所以我尝试了很多事情，但都没能成功。以下是所发生情况的示例：https://i.stack.imgur.com/GadqK.jpg
.pic {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 2.28/1;
background: url('pictures/Coldcreekranch Faistenau Slider.jpeg');
background-attachment: fixed;
}
.text {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
}<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap">
<link rel="stylesheet" href="index.css">
<link rel="icon" type="image/x-icon" href="pictures/ccr_logo.ico">
</head>
<body>
<nav class="navbar"></nav>
<main>
<div class="pic" id="parallax">
<h1></h1>
</div>
<div class="text">
<h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</h1>
</div>
</main>
<script src="scripts/parallax_main.js"></script>
</body>问题是您为图像添加了固定的纵横比，这意味着当窗口更宽时，图像会更高。
有一个background-size属性可能会对您有所帮助，例如background-size: cover。
你可以在这里阅读更多关于它的信息以及它的工作原理：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size