css - 使用 css 固定渐变背景

Question

我希望我的页面具有从上到下流动的渐变背景。我希望背景像固定图像一样工作，因为渐变从当前浏览器视口(viewport)的顶部延伸到底部，并且看起来与您上下滚动页面时的效果相同。换句话说，它不会在您滚动时重复。它固定在原地。

所以我想要的是:

滚动到底部后你会看到这个

请注意，渐变在页面底部和顶部看起来完全一样。它从全黄变为全红。

我实际上能做的最好的事情是让渐变跨越页面的整个内容，而不仅仅是可见部分，如下所示:

底部是这样的:

请注意，渐变跨越了整个内容长度，而不仅仅是当前可见的内容。因此，在页面顶部，您看到的大部分是黄色，而在页面底部，您看到的大部分是红色。

我想我可以使用在 y 平面中拉伸(stretch)并在 x 平面中重复的图像来解决这个问题，但我宁愿不这样做，因为如果可能的话，因为拉伸(stretch)图像可能会导致 block 状、非颗粒状的渐变。这可以仅使用 CSS 动态完成吗？

Answer 1

如果您希望使用 CSS3 渐变来执行此操作，请尝试使用 background-attachment property

例如，如果您将渐变应用到 #background，则将其添加到 CSS 渐变之后。

背景附件:已修复；

Note: You must add background-attachment after the background properties.

您的整个代码可能如下所示:

#background {
  background: #1e5799;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
  background: -webkit-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  background:    -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  background:     -ms-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  background:      -o-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  background:         linear-gradient(to bottom, #1e5799 0%, #7db9e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
  background-attachment: fixed;
}