Question

首先，抱歉我的英文： - ）

我正在尝试完全重新设计我的博客。它必须是响应式的，我想在我的标题中集成视差效果（这就是为什么我使用图片作为背景而不是图像标记）。 Parallax已经可以工作了，但我的第二层“header-title”有问题。如果我调整窗口大小，我的标题背景会自动调整其宽度和高度，但“标题标题”图层不会。

在这里，您可以看到问题：http://jsfiddle.net/utkcT/

    <div id="header" data-type="background" data-speed="10">
    <div id="header-title">
        Dieser Text ist zentriert!
    </div>
</div>

    #header{
    width:100%;
    height:500px;
    background-attachment:fixed;
    background-image: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/411/cache/northern-lights-picture-aurora-borealis-september-2011-yukon_41173_600x450.jpg");
    background-repeat:no-repeat no-repeat;
    background-size: contain;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    }

#header-title{
    background: -moz-linear-gradient(bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.2));
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.2));
    width:100%; 
    height:500px;
    padding-top:25%;
    color:#fff;
    text-align:center;
    }

      $(document).ready(function(){

    $(window).on('resize', function(){
        $('#header-title').height($('#header').height());
    });


    // ---------------PARALLAX FUNCTION ------------------------    

    $('data-type="background"').each(function(){
        var $bgobj = $(this); // assigning the object

        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgobj.data('speed')); 

            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $bgobj.css({ backgroundPosition: coords });
        }); 
    }); 


});

我已经尝试使用Javascript / JQuery修复它，但是它不起作用，因为“header-title”在“header”标记内。

非常感谢你的建议。

Answer 1

好的，我不确定我是否已经完全理解但是这里有一个镜头！

我首先更改了图像，因为指定的图像欺骗了我，认为它是600px×450px。

但事实证明它是600px到404px，所以无论如何图像替换。我所做的更换如下：

标题标题 - 现在是一个相对定位的div，100％。在这个div中，我放了一个透明的图像，这个是12像素×9像素，所以一旦它被拉伸，它就像背景图像一样是650像素×450像素。如果更改图像，则必须更新透明垫片。

此间隔物然后在放大时将强制高度与背景相同。因此无需设置div的高度。

在这个内部我已经在文本周围包裹了一个div，将其定位在标题标题div中。

<div id="header" data-type="background" data-speed="10">
    <div id="header-title">
        <img src="http://i59.tinypic.com/2qcnwn9.png" id="spacer-img" />
        <div id="header-text">Dieser Text ist zentriert!</div>
    </div>
</div>


#header{
    width:100%;
    background-attachment:fixed;
    background-image: url("http://www.reactive.com/Media/images/hero-ripcurl-01-2615749e-fba2-47da-abc7-d0ea3a9ecfbd-0-600x450.jpg");
    background-repeat:no-repeat no-repeat;
background-size:100%;
    -webkit-background-size: contain;
    -moz-background-size: contain;
}

#spacer-img{
    width:100%; 
    display:block;
}

#header-text{
    position:absolute;
    margin-top:25%;
    width:100%;
    top:0;
    color:#fff;
    text-align:center;
}


#header-title{
    background: -moz-linear-gradient(bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.2));
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.2));
    width:100%; 
    position:relative;
}

在此处查看：http://jsfiddle.net/utkcT/2/

希望这是你想要实现的目标。

在div内部，背景调整大小不起作用（使用视差效果）？

1 个答案: