jquery - Div inside div，背景大小调整不起作用(使用视差效果)？

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

好的，我不确定我是否已经完全理解，但在这里试一试!

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

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

页眉标题 - 现在是一个相对定位的 div，占 100%。在这个 div 中我放了一个透明图像，这个是 12px x 9px 所以一旦它被拉伸(stretch)它就是 650px x 450px 根据背景图像。如果更改图像，则必须更新透明垫片。

这个垫片然后在放大时会强制高度与背景相同。因此不需要设置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/

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