Html CSS：将背景渐变设置为100%宽度，除非页面滚动

这里有两个屏幕截图，显示了必须滚动的小视口的效果

HTML如下所示：（忽略head和HTML标记）

我该如何解决这个问题？据我所知，我必须在不同的div上有梯度，因为我需要指定高度

---

（我知道CSS渐变在IE中不起作用-那里有一个模拟行为的背景图像。它也有同样的问题。）

这是

位置：绝对

的预期行为，其坐标在渲染时相对于视口

---

可能存在一种保留

grad1

DIV的解决方法，但是为什么不简单地将背景图像/渐变放入主体中呢？从我所看到的，背景是无论如何都要扩展到整个文档。

好的，对于那些发现这个问题但无法解决的人来说，CSS应该是这样的：

body {
 color: #111;
 background-color: #3E9C9D;
}

#grad1 {
 height: 600px;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -100;
 width: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#3E9C9D));
    background-image: -moz-linear-gradient(#fff 0%, #3E9C9D 100%);
}


#wrapper {
 max-width:960px;
 min-width:840px;
 margin: 0 auto;
}

body {
 color: #111;
 background-color: #3E9C9D;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#3E9C9D));
 background-image: -moz-linear-gradient(#fff 0%, #3E9C9D 100%);
 background-repeat:repeat-x;
 background-size: 100% 600px;
 -o-background-size: 100% 600px;
 -moz-background-size: 100% 600px;
 -webkit-background-size: 100% 600px;
}

#wrapper {
 max-width:960px;
 min-width:840px;
 margin: 0 auto;
}

从2年后开始编辑-渐变语法有所改变，现在每个人都支持它。在使用此代码之前，请确保阅读了更改

html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}

.gradient {
background: linear-gradient(top, #243d6e 0%,#031b4d 61%,#011132 100%); /* W3C */
background-repeat: no-repeat;
background-attachment: fixed;
}

---

将.gradient附加到body标记或容器div。

创建特定于浏览器的网页不是一个好主意

在所有浏览器上工作的渐变背景只需使用背景图像即可制作

创建带有渐变的窄（甚至一个像素宽）图像

在CSS中，设置背景图像在x方向重复，但不在y方向重复

将主体背景颜色设置为与图像底部的颜色相同

以下是CSS：

body {
 color: #111;
 background-color: #3E9C9D;
 background-image: URL(gradient_green.png);
 background-repeat:repeat-x;
}

#wrapper {
 max-width:960px;
 min-width:840px;
 margin: 0 auto;
}

---

啊，这是有道理的。我没有这样做，因为我必须为带有渐变的元素指定一个高度（否则，绘制的渐变根据每个页面有不同的高度）…@Rich我明白了。从gradient文档中可以看到，您应该能够设置

背景大小来固定渐变的高度（我以前没有使用过渐变，但看起来很像。）是的，我只是四处挖掘，发现了同样的东西。它确实有效，但渐变会重复。在背景图像上设置“不重复”会导致其停止渲染，而设置“重复-y”则不会执行任何操作！：（谢谢。背景尺寸在Firefox上可用，但在Chrome上试用时不起作用。因此，我猜Firefox在这一部分更兼容。我正在使用特定的浏览器开关进行尝试。我使用Chrome 14，如果不使用-webkit选项，它就无法工作。如果我单独使用背景尺寸，它在Firefox上工作，但在Chrome上不工作。这非常有用。）创建特定于浏览器的网页不是一个好主意。你应该遵守标准。首先，我在2年前提出了这个问题，当时这种语法是全新的，因此没有供应商。其次，它是标准的：。第三，对于较旧的浏览器，我使用我开发的技术：生成png。使用这种技术可以显著减少加载时间，并在IE10发布后在所有浏览器中运行。1.-webkit-和-moz-不是标准的，它们永远不会成为标准。你不应该在两年前使用它们，就像你不应该使用供应商可能开发的任何新的浏览器特定功能一样。2.CSS3实现与这里给出的解决方案无关。3.使用非标准渐变不会不要减少加载时间。你无法理解窄渐变图像非常小。4.即使IE10已经推出，但并非所有浏览器都支持这种新技术。大多数人使用的旧浏览器并不支持这种技术。例如，在Windows XP上，IE8是可以使用的最新技术。使用CSS渐变替换HTTP请求和207字节PNG和大约74字节的Gzip CSS。我知道这不多，但它大约是下载大小的一半。这两种技术的渲染时间差不多。当然，这个网站没有太多渐变，但对于其他网站，我做过的差异更大。正如我所说，我在旧浏览器中使用PNG，所以它每天都工作其中，无论是PNG还是CSS。上面的代码只是一个片段。大多数人都不使用旧浏览器。使用我制作的分析包，在过去一个月里，我所有客户网站上大约有65%的50000名用户拥有可以使用CSS渐变的浏览器。一年内，如果当前趋势保持不变，应该是所有浏览器的3/4左右用户。
body {
 color: #111;
 background-color: #3E9C9D;
 background-image: URL(gradient_green.png);
 background-repeat:repeat-x;
}

#wrapper {
 max-width:960px;
 min-width:840px;
 margin: 0 auto;
}