大家好,我试图在自举网格系统中制作简单的视差效果,但我遇到了问题。我并排制作了两个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
答案 0 :(得分:3)
这是你的答案
你需要使用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"})
})