Question

我无法弄清楚如何使我的季节性叠加div成为html的全部高度。现在它是屏幕的高度，但向下滚动会切断部分图像。有没有人知道正确的方法来使sesasonal overlay div扩展html的整个高度？ div是服务器端包含的一部分，所以我不能在我的内容后关闭底层div。另外，我的封闭式在线销售的一半不使用javascript，所以它需要是一个html / css解决方案。

只需看到我的JSFIDDLE即可以节省阅读时间。

感谢。

CSS：

html{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C5CEFF', endColorstr='#F8D0FD',GradientType=0 );
    background: -webkit-gradient(linear, left top, left bottom, from(#C5CEFF), to(#F8D0FD)) fixed;
    background: -moz-linear-gradient(top, #C5CEFF, #F8D0FD);
    margin:0px;
    padding:0px;
    min-height:100%;
}

body{
    margin:0px;
    padding:0px;
    overflow-x: hidden;
    min-height:100%;
    display:block;
}

.background-overlay-season
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
    width:100%;
    background-image:url(http://sonosmile.com/images/fall.png);
    margin:0px;
    padding:0px;
    overflow-x: hidden;
    min-height:100%;
    display:block;
}

HTML：

<html>
<body>
<div class="background-overlay-season"></div>
a bunch of content....
</body>
</html>

Answer 1

是的，我想我已经找到了。

首先，我认为图像应该设置在身体上，但是你说在IE中不起作用，你说得对。

如果我们从filter CSS中删除了html并且出现了正文背景图片，但显然这不太有用，因为我们在IE中丢失了渐变。好。所以，试图找出原因，我测试了从Colorzilla创建一个新的渐变。当我把它放进去时，它起作用了：

background: #c5ceff; /* Old browsers */
background: -moz-linear-gradient(top,  #c5ceff 0%, #f8d0fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5ceff), color-stop(100%,#f8d0fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #c5ceff 0%,#f8d0fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #c5ceff 0%,#f8d0fd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #c5ceff 0%,#f8d0fd 100%); /* IE10+ */
background: linear-gradient(to bottom,  #c5ceff 0%,#f8d0fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5ceff', endColorstr='#f8d0fd',GradientType=0 ); /* IE6-9 */

大。但为什么？经过一些调试后，事实证明，除非你指定第一个背景（background: #c5ceff; /* Old browsers */），否则它将无效，身体上的背景就不会显示。它不仅仅是背景图像，也不适用于纯色。不知道为什么。

但是你去了。这是你的新CSS，你的叶子背景图像在身体上，并在IE中工作。

html {
  background: #c5ceff; /* Old browsers */
  background: -webkit-gradient(linear, left top, left bottom, from(#C5CEFF), to(#F8D0FD)) fixed;
  background: -moz-linear-gradient(top, #C5CEFF, #F8D0FD);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C5CEFF', endColorstr='#F8D0FD',GradientType=0 );
  margin:0px;
  padding:0px;
}

body{
  margin:0px;
  padding:0px;
  background:url(http://sonosmile.com/images/fall.png);
}

<强> http://jsbin.com/eBOcuLE/4/edit

请注意，我为空div删除了所有样式。使用该div作为背景将不起作用，因为虽然您可以使其高度为100％，但它只是视口的高度。它没有内容，所以它不知道页面内容比视口更长。

Answer 2

嗯，我想我可能会给你一个答案。

请记住，在使用position:absolute时，元素最终会相对于它与position:relative遇到的第一个祖先元素。如果不存在，容器将被视为<html>。那么为什么不<html>，因此.background-overlay-season不在文档的底部？

您必须考虑min-height: 100%上<html>指定的<html>实际上相对于什么;它究竟是100％的？该行为表明它实际上是相对于浏览器视口的高度，因此<body>（以及使用它作为高度参考的任何元素）可以保证与视口一样高。因此，您实际上想要通过简单添加CSS来<html>容器，而不是body{ position:relative; }：

.background-overlay-season

这是JSFiddle，显示了这一点。请注意，{{1}}现在扩展到文档的底部。如果这不是你想要的，请告诉我，我会很乐意（尝试）进一步帮助！（这对我来说也是一种学习经历，哈哈......）

Answer 3

如果您想在所有身体上使用背景图像，可以使用此

body
{
  background-image: url(http://sonosmile.com/images/fall.png);
  background-size: contain;
}

试试这个fiddle

Answer 4

将div .background-overlay-season的内容移至body。

body {
    background-image: url("http://sonosmile.com/images/fall.png");
    display: block;
    left: 0;
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

HTML CSS高度100％仅与屏幕分辨率一样高，而不是身高

4 个答案: