css - 通过视差添加图像 (Bootstrap 4)

Question

我目前正在学习使用 Bootstrap 并陷入其中。我在 bootstrap 中设置了视差图像，但是，我无法在不破坏它的情况下添加内容(比方说卡片或图像，不管图像如何)。

只要我能在视差上添加一个 div，我就会很高兴。

以一段文字为例的代码(思路是添加图片或行):

<div id="parallax-image">
  <section>
    <div class="parallax-one">
      <div class="text">
        <h2>Heading</h2>    
      </div>
    </div>
  </section>
</div>

CSS

#parallax-image .parallax-one{
  padding-top: 200px; 
  padding-bottom: 200px; 
  overflow: hidden;
  position: relative; 
  width: 100%; 
  background-image: url(img/paralax_1.jpg);
  background-attachment: fixed; 
  background-size: cover; 
  -moz-background-size: cover; 
  -webkit-background-size: cover; 
  background-repeat: no-repeat;
  background-position: top center;
}

除了字体系列和 .text 对齐之外，没有什么特别之处。我还有一个媒体查询，在小屏幕上将 padding 更改为 100px

编辑 我注意到我可以根据划桨做负边距。 添加到 .text 时，我可以获得与我正在寻找的效果类似的效果:

margin-bottom: -200px; margin-top: -140px

但是，我不确定这样的事情是否会产生负面影响。

Answer 1

添加图像正在使用您当前的代码。 如果以下行为不是您所期望的，您能否告诉我们？

#parallax-image .parallax-one{
overflow: hidden;
position: relative;
width: 100%;
background-image: url(http://theartmad.com/wp-content/uploads/2015/09/Best-Desktop-Background-1.jpg);
background-attachment: fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}
img {
  display: block;
  height: 50vh;
}

<div id="parallax-image">
<section>
  <div class="parallax-one">
    <div class="text">
      <h2>Heading</h2>    
    </div>
    <img src="http://cdn.apk-cloud.com/detail/screenshot/21TMCtcX5zkbnDViowtD6roqiEPWaitP46F8aDkvJxErPuirh_H6kCa-cJbZmCpsrQ=h300.png" alt="image" />
    <img src="http://cdn.apk-cloud.com/detail/screenshot/21TMCtcX5zkbnDViowtD6roqiEPWaitP46F8aDkvJxErPuirh_H6kCa-cJbZmCpsrQ=h300.png" alt="image" />
  </div>
</section>
</div>