Question

我目前修复了我的顶部背景，下面的部分滚动在背景之上。问题是，当我滚动时，顶部背景上的文字会滚动，但我仍然希望它固定在背景上，同时仍然是自助响应。这是我的代码：

＆＃13;

.topInfo {
  background-image: linear-gradient( rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)), url('/CMS_Static/Uploads/313864614C6F6F/exuma rocks 2.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
}

.topInfoText {
  color: white;
  padding-top: 275px;
  font-size: 3.3em;
}

.bannerBtn {
  border-style: solid;
  border-width: 2px;
  border-color: #ffffff;
  border-radius: 50px;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-top: 130px;
  font-size: 1.45em;
  color: #ffffff;
  font-weight: 700;
  transition: all 0.3s ease-in-out 0s;
}

＆＃13;

<section class="topInfo">
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <h1 class="topInfoText text-center">Aerial Drone Services and Stock Footage</h1>
      </div>
      <div class="col-sm-4 col-sm-offset-4">
        <a class="btn bannerBtn btn-block" href="#">Learn More</a>
      </div>
    </div>
  </div>
</section>

＆＃13;

Answer 1

试试这个，

将<package_name>/images.py添加到标题position: fixed;，将topInfoText添加到按钮margin-top: 100vh。

bannerBtn

body {
  background: #333;
}

.topInfo {
  background-image: linear-gradient( rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)), url('image here');
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.topInfoText {
  color: white;
  padding-top: 275px;
  font-size: 3.3em;
  position: fixed; /* Change */
}

.bannerBtn {
  border-style: solid;
  border-width: 2px;
  border-color: #ffffff;
  border-radius: 50px;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-top: 130px;
  font-size: 1.45em;
  color: #ffffff;
  font-weight: 700;
  transition: all 0.3s ease-in-out 0s;
  margin-top: 100vh; /* Change */
}

jsfiddle here

使用视差效果时如何使文本和按钮固定为背景

1 个答案: