背景大小在背景位置切换为固定时跳动问题

Question

我帮助处理Parallax/Scrolling Timeline项目，但CSS3的Background-size cover属性存在问题。

该div具有以下属性：

background: url(../images/timeline/back-6.jpg) no-repeat top center black; 
background-size: cover;
padding-top: 90px;
height: 1855px;
position: relative;

使用jQuery将background-attachment切换为fixed。这样做会使背景图片向内跳动（也就是说，屏幕边缘之外的部分现在可见了）。这不是期望得到的结果。

在测试中，我可以将div切换为使用background-size：100％覆盖，但滚动时会引起不同的垂直跳动问题。

有什么办法可以防止在将背景切换为fixed时出现跳动？（当我将背景设置为scroll时也会发生相反的情况）。

很遗憾，我无法提供此代码的演示，因为该页面尚未准备好部署。

- Fernker

Answer 1

我之前遇到过同样的问题，在设置background-size为cover或contain时。

通过@media设置固定的高度，例如针对较小的屏幕，可以防止背景图像跳动。经过我的测试，我得出结论，跳动是由于将background-attachment设置为fixed后元素方向引起的。

将其设置为fixed后，size是根据视口的大小计算的，而不是包含background-image的元素的大小。这就是跳动的原因，也是为什么为background-size设置固定的高度或宽度可以解决此问题的原因。

- Kilian Stinson

---

我有同样的问题，但这对我没有用。我已经将背景设置为覆盖（尽管我尝试了使用固定值），如果我试图将图像位置调高一点，屏幕仍然会在滚动时向下跳动。还有其他解决方案吗？ - CZorio

Answer 2

在创建一个带有scrollTo-Plugin等的单页布局时，我遇到了同样的问题...... 页面布局分为两部分： 左侧是背景图像，应该随右侧内容的变化/滚动而改变/滚动。 因此，我使用了一种jquery插件来结合"background-position: fixed"和"background-size: cover"。 您只需要通过类/ID定义元素以对齐背景图像。

不要抱怨代码。我对javascript/jquery相对较新。但它可以工作 ;) 这就是代码：

function fixedResize() {
    var targetEl = $('element where bg-images are in');
    var targetWidth = targetEl.width();
    var targetHeight = targetEl.height();
    var targetPosX = targetEl.offset().left;
    var targetPosY = targetEl.offset().top;
    var leftRatio = targetWidth / targetHeight;
    //console.log('TargetWidth', targetWidth, 'TargetHeight', targetHeight, 'Offset', targetPosX, targetPosY, 'leftRatio', leftRatio);
    targetEl.each(function(){

        var imgTarget = $(this);
        var url = $(this).css('background-image').replace('url(', '').replace(')', '').replace("'", '').replace('"', '');
        var bgImg = $('<img />'); // make background-image as image tag for getting width and height of the image
        imgTarget.css('background-attachment','fixed');
        bgImg.hide();
        bgImg.bind('load', function(){
            var imgHeight = $(this).height();
            var imgWidth = $(this).width();
            var imgRatio = imgWidth / imgHeight;
            $(this).remove(); // remove img Tags again

            // Calculate resize dimensions
            if (imgRatio > leftRatio) {
                var currentWidth = imgRatio * targetHeight; // image width after resize
                var currentHeight = (currentWidth/imgWidth)*imgHeight;
                var setToLeft = ((currentWidth - targetWidth)/2);
                var imgPosX = targetPosX - setToLeft;
                var imgPosY = (currentHeight - targetPosY - currentHeight/2 - targetHeight/2)* -1;
                var resizeImg = 'background-size: auto '+ targetHeight +'px;';                  

                } else if (imgRatio < leftRatio){
                    var currentWidth = targetWidth;
                    var currentHeight = (currentWidth/imgWidth)*imgHeight;
                    var imgPosX = targetPosX;
                    var imgPosY = (currentHeight - targetPosY - currentHeight/2 - targetHeight/2)* -1;
                    var resizeImg = 'background-size: '+ targetWidth +'px auto;'; // resize background
                }
            imgTarget.attr('style','background-attachment: fixed; background-position: '+ imgPosX +'px '+ imgPosY +'px;' + resizeImg);
            console.log('imgWidth', imgWidth, 'imgHeight', imgHeight, 'imgRatio', imgRatio, 'currentWidth', currentWidth, 'currentHeight', currentHeight, 'setToLeft', setToLeft);
            console.log('imgPos', imgPosX, imgPosY, 'setToLeft', setToLeft, targetPosX);

        });
        $(this).append(bgImg);
        bgImg.attr('src', url);

    });
}
fixedResize(); // initiate function

$(window).resize(function() {
    fixedResize(); // initiate function for window resize (Fluid behavior)
});

or jsfiddle.net/rowphant/eXb6e/14/

- Row Phant