当使用css作为背景附件时，为什么背景图像在滚动时会抖动:滚动

why background image jerks while scrolling when using css as background-attachment:scroll

本文关键字：背景 滚动 为什么 图像 抖动 css      更新时间：2023-09-26

我对两个div使用background-attachment:scroll，滚动效果很好，但问题只是滚动时背景图像抖动。我在下面附上我的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链接：https://jsfiddle.net/ansarmon/apxrztat/1/

有人能帮我吗？

尝试添加

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

至.slider_area

您可以使用后台附件：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/

相关文章：