bootstrap 网格内的视差效果

Question

大家好，我正在尝试在 bootstrap 网格系统中制作简单的视差效果，但我遇到了运行问题。我并排制作了两个 divs，我想要一个 div 来保存静态图像，而另一个应该有视差效果。

我有视差问题div 背景大小属性无论我怎么尝试都无法覆盖我的视差div 我想要的方式，背景图片最终总是比它应该或没有正确对齐更大。

这是我的代码：

HTML:

<section id="twoImages" class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div class="parallax"></div>
        </div>
        <div class="col-md-6">
            <img class="d-block img-fluid" src="https://placebear.com/715/470" alt="shoe newspaper">
        </div>
    </div>
</section>

CSS:

body {
    margin-bottom: 50em;
}

#twoImages {
    padding: 0;
    margin: 0;
}
#twoImages .col-md-6 {
    padding: 0;
    margin: 0;
}
#twoImages .parallax {
    /* The image used */
    background-image: url("https://placebear.com/715/470");
    /* Full height */
    height: 100%;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

这是代码笔，这样你可以更好地理解我的问题https://codepen.io/Karadjordje/pen/VpeBzp

Answer 1

这是你的答案

你需要使用jquery

检查这个https://codepen.io/parthjasani/pen/YZwJMq

remove 
 background-attachment: fixed; 
from css

并添加此 jquery 代码

var $ = jQuery.noConflict()
$(window).scroll(function(){
  var scroll = $(this).scrollTop()
  $(".parallax").css({"background-position":"0px "+scroll/2+"px"})
})

bootstrap 网格内的视差效果

Parallax effect within bootstrap grid

javascript

jquery

css

twitter-bootstrap

parallax