2

注意：我已将该页面上传到我的网站，因此希望它会更容易解决：

http://www.jasonkahl.co.uk/div-center/index.html

我正在开发一个使用视差效果的小型网站。

但是，我希望我的第一个图像是 div 中的背景图像，当用户继续时，它始终位于屏幕的中心。因此，我使用以下脚本将名为#second .bg的 DIV 居中：

<script type='text/javascript'>
function CenterItem(theItem){
    var winHeight=$(window).height();
    var windowMiddle=winHeight/2;
    var itemMiddle=$(theItem).height()/2;
    var theMiddle=windowMiddle-itemMiddle;
    if(winHeight>$(theItem).height()){ //vertical
        $(theItem).css('top',theMiddle);
    } else {
        $(theItem).css('top','0');
    }
}

$(document).ready(function() {
    CenterItem('#second .bg');
});
$(window).resize(function() {
    CenterItem('#second .bg');
});

</script>

DIV 本身居中，但背景图像不居中，最终看起来像这样（注意：蓝色框是 div 位置）：

在此处输入图像描述

这就是删除脚本时发生的情况：

在此处输入图像描述

那么如何让背景图像位于 DIV 的中心呢？

如果它有帮助，那就是如何在 html 中设置 div：

<div id="second">
      <div class="story"><div class="bg"></div>
      </div> <!--.story-->      
</div> <!--#second-->

这是CSS：

#second .bg{
    background: url(images/logo.png) 50% 0 no-repeat fixed ;
    height: 380px;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    background-position: center center;
    width: 960px;
    z-index: 200;
}

谢谢

4

0 回答 0