Jumbotron 固定图像跳转

问题描述

我正在为朋友编写一个网站，但是当我向下滚动页面时，超大屏幕背景图像一直在跳动。有人可以向我解释我做错了什么吗？谢谢。

此处的 Codepen 链接：https://codepen.io/Bekahlea/pen/bGqNaVo

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-image: url("../images/microphone-1074362_1920.jpg");
  height: 500px;
  background-attachment:fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0.3rem;
  color: white;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

解决方法

您的代码似乎运行良好：

body {
  height: 200vh;
}

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  height: 500px;
  background-image: url("https://images.unsplash.com/photo-1593642532744-d377ab507dc8?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0.3rem;
  color: white;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>

,

通过去除解决：border-radius: 0.3rem;正如 Ali Klein 所建议的那样。