Question

我的HTML背景设置如下：

html {
    background: url("main_bg2.jpg") no-repeat center center fixed; 
   -webkit-background-size: cover;
   -o-background-size: cover;
    background-size: cover;     
}

这与我想要的完全一样。背景居中，覆盖整个浏览器窗口并保持成比例。

但是，如果我有很多内容可以扩展页面高度并使其滚动，那么我的背景图像会扩展为包含大div的高度，并且最终会以太大的方式缩放。

有没有办法从HTML元素的整体高度中提取div的高度，以便图片不会像DIV那样变大？

有点像让div滚动浏览器窗口而不影响HTML元素的高度吗？

Answer 1

我建议您更改正在放置背景的容器。根据定义，您可以通过选择html元素来定位页面上的所有内容。我会制作一个容器，并将所需的所有元素放在背景前面。

<html>
   <div class="page_container">
       <div> Your elements </div>
   </div>
   <div> The other components that are stretching your background </div>
</html>

然后你可以这样做：

.page_container {
    background: url("main_bg2.jpg") no-repeat center center fixed; 
   -webkit-background-size: cover;
   -o-background-size: cover;
    background-size: cover;     
}

Answer 2

如果您使用以下内容：

background-attachment: fixed;

Answer 3

Fiddle

$(document).ready(function(){
  var bodyBG = $('.no-bg').height();

  $('body').css('background-positionY', bodyBG);
});

试试这个，这不会减小尺寸，但会缩小尺寸，因此根据您要排除的内容的高度来覆盖较小的尺寸。

如何从HTML元素的高度中排除div的高度？

3 个答案: