Question

我正在使用background-attachment:scroll两个div，滚动效果很好，但只有问题是滚动时的背景图像抖动。我在下面附上我的CSS：

.slider_area {
    width:100%;
    height:600px;
    background:#9ad5e3 url(../images/slide_1.jpg) center top no-repeat; 
    background-attachment:scroll;
    -webkit-background-attachment:scroll;
    background-size:cover;
}

.cont_1_wrapper {
    width:100%;
    height:auto;
    padding:100px 0;
    background:url(../images/cont_1_bg_b.jpg) repeat;
    background-attachment:scroll;
}

<script>

    $(window).scroll(function() {
        var scrolledY = $(window).scrollTop();
        $('.scroll').css('background-position', 'center ' + ((scrolledY)) + 'px');
    });

</script>

JSFIDDLE LINK：https://jsfiddle.net/ansarmon/apxrztat/1/

有人可以帮我这个吗？

Answer 1

尝试添加

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);

到.slider_area

Answer 2

你可以使用background-attachment：fixed;用于固定背景图像。不需要jquery。

.slider_area 
{
    width:100%;
    height:600px;
    background:#9ad5e3 url(http://www.pro.net.in/demo/cheetahbridge/images/slide_1.jpg) center top no-repeat;   
    background-attachment:fixed;
    -webkit-background-attachment:fixed;
    background-size:cover;
}

https://jsfiddle.net/62jv0nz5/

使用css作为背景附件滚动时为什么背景图像抖动：滚动

2 个答案: