Question

大家好，我试图在自举网格系统中制作简单的视差效果，但我遇到了问题。我并排制作了两个divs，我想要一个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;
}

以下是codepen，以便您更好地了解我的问题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"})
})

自举网格中的视差效果

1 个答案: