Question

我需要在所有页面内容的背景中使用一个单独的图像（01.jpg），并且此图像不应该是可滚动的，而所有内容都应该可以在后台滚动。

这是我的尝试，但有些事情是错误的，它不起作用。向下滚动一个白色区域显示为背景（00.jpg），可能是因为wrap div高于body。

这里的最佳做法是什么？

<body>
<div id="wrap">
...
</div>

</body>

CSS

html{
    background-image:url(backs/00.jpg);
    height:100%;
}
body{
    max-width:1920px;
    height:100%;
    background-image: url("imgtop/01.jpg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position:center;
    background-attachment: fixed;
}

Answer 1

这里的问题是height: 100%部分。它为元素提供了一个恒定的，有限的高度：视口的高度，而不是整个文档的高度。（高度属性的计算从最顶层元素向下发生，因此不要期望较低级别元素的变化会影响较高元素的高度百分比。）

据我所知，没有那些，它对我来说很好。如果这不起作用，请尝试将其更改为min-height。

Answer 2

试试这个css

  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

有关详细信息，请查看此https://css-tricks.com/perfect-full-page-background-image/

Answer 3

How to specify a fixed background image

如果身体背景覆盖仍然存在问题，可以尝试编辑其z值（z-index: 100;）。

一个单个不可滚动的背景图像，用于整个页面内容

3 个答案: