Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/39.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/.net/26.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 当背景位置切换到固定位置时,背景大小覆盖跳跃_Css - Fatal编程技术网

Css 当背景位置切换到固定位置时,背景大小覆盖跳跃

Css 当背景位置切换到固定位置时,背景大小覆盖跳跃,css,Css,我正在进行视差/滚动时间轴项目,我对CSS3背景大小封面属性有问题 div具有以下属性: background: url(../images/timeline/back-6.jpg) no-repeat top center black; background-size: cover; padding-top: 90px; height: 1855px; position: relative; 使用jQuery,我将后台附件切换到fixed。当我这样做时,背景图像跳入(意味着图像中经过屏幕边

我正在进行视差/滚动时间轴项目,我对CSS3背景大小封面属性有问题

div具有以下属性:

background: url(../images/timeline/back-6.jpg) no-repeat top center black; 
background-size: cover;
padding-top: 90px;
height: 1855px;
position: relative;
使用jQuery,我将后台附件切换到fixed。当我这样做时,背景图像跳入(意味着图像中经过屏幕边缘的部分现在可见)。这不是期望的结果

在测试中,我可以将div切换为使用背景大小:100%覆盖,但在滚动时会导致不同的垂直跳跃问题

当我把背景切换到“固定”时,有没有办法防止它跳进来?(当我将背景设置为滚动时,也会发生相反的情况)


很遗憾,我无法链接到该代码的演示,因为该页面还没有准备好部署

当我将
背景大小设置为
封面
包含

设置固定高度,例如通过
@media
为较小屏幕设置固定高度,可防止背景图像跳跃。测试后我得出结论,跳跃是由于将
背景附件
设置为
固定


将其设置为
fixed
size
由视口的大小计算,而不是由包含
背景图像的元素计算。这就是跳跃的原因,以及为
背景大小设置固定高度或宽度的原因解决了这个问题

我在创建一个单页布局时遇到了同样的问题,我想使用scrollTo插件等等。。。。 页面布局分为两部分: 左侧为背景图像,背景图像应随右侧的内容进行更改/滚动。 所以我曾经制作了一种jquery插件,将“背景位置:固定”和“背景大小:封面”结合起来。 您只需要按class/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)
});
函数fixedResize(){
var targetEl=$(“bg图像所在的元素”);
var targetWidth=targetEl.width();
var targetlight=targetEl.height();
var targetPosX=targetEl.offset().left;
var targetPosY=targetEl.offset().top;
var leftRatio=目标宽度/目标宽度;
//log('TargetWidth',TargetWidth',targetLight',targetLight',Offset',targetPosX,targetPosY',leftRatio',leftRatio);
targetEl.each(函数(){
var imgTarget=$(本);
var url=$(this.css('background-image').replace('url(','').replace('),'').replace('url(',''),'').replace(';
变量bgImg=$('
或

jsfiddle.net/rowphant/eXb6e/14/

我也有同样的问题,这对我来说不起作用。我已经设置了背景覆盖(尽管我尝试使用固定值),如果我尝试将图像定位得更高一点,屏幕仍然会在滚动操作时向下跳转。还有其他解决方案吗?