1

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

2 回答 2

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>

于 2021-05-06T23:42:02.083 回答
0

通过去除解决：border-radius: 0.3rem; 正如阿里克莱因所建议的那样。

于 2021-05-07T17:13:53.547 回答