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

【问题标题】：Div inside div, background resizing not working (using parallax effect)?div 内的 div，背景调整大小不起作用（使用视差效果）？
【发布时间】：2014-02-12 19:16:41
【问题描述】：

首先，对不起我的英语:-)

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

在这里你可以看到问题：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”标签内。

非常感谢您的建议。

【问题讨论】：

您应该避免使用 Javascript 计算尺寸。我不太了解您的问题，但是 background-size: cover; 呢？ ?
你能解释一下你的问题是什么以及你想达到什么我不确定我是否完全理解？
@JimboJones 问题是我有 2 个 id 为“header”和“header-title”的 div。其中一个以图片为背景（背景大小：包含；）并具有视差效果。另一个有背景颜色，顶部透明度较高，底部透明度较低。在通常的分辨率下它们看起来不错，但如果我调整窗口大小并将其缩小，问题是“标题”的高度小于“标题标题”的高度。为了更好地理解，我向您展示了图片中的两种情况。 s14.directupload.net/images/140211/ez98lm2i.jpg

标签： jquery css html responsive-design parallax

【解决方案1】：

好的，我不确定我是否完全理解，但这里试一下！

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

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

Header Title - 现在是 100% 相对定位的 div。在这个 div 中，我放置了一个透明图像，这个是 12 像素 x 9 像素，所以一旦它被拉伸，它就是 650 像素 x 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/

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

【讨论】：