Jumbotron 固定图像跳转答案

【问题标题】：Jumbotron Fixed Image JumpsJumbotron 固定图像跳转
【发布时间】：2021-07-29 07:14:58
【问题描述】：

我正在为一个朋友编写一个网站，但是当我向下滚动页面时，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;
}

【问题讨论】：

“跳跃”是什么意思？最好发布一个工作示例以寻求帮助。
我添加了一个 codepen 链接来显示我的意思。你可以在这里找到它：codepen.io/Bekahlea/pen/bGqNaVo
尝试从.jumbotron 中删除border-radius: 0.3rem;。
非常感谢！那解决了它。感谢您的帮助！
我真的不知道为什么会导致问题哈哈。但很高兴我能帮上忙！

标签： html css bootstrap-4 background-image background-attachment

【解决方案1】：

您的代码似乎运行良好：

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>

【讨论】：

奇怪的是，它在您的设置中的工作方式以及图像在我的代码上的伸展和跳跃。

【解决方案2】：

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

【讨论】：