用css修复了渐变背景

Question

我希望我的页面有一个从上到下的渐变背景.我希望背景像固定图像一样,渐变从当前浏览器视口的顶部延伸到底部,看起来与向上和向下滚动页面相同.换句话说,滚动时不会重复.它保持固定.

所以我想要的是:

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

请注意,页面底部的渐变与顶部的渐变看起来完全相同.它从全黄色变为全红色.

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

底部看起来像这样:

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

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

Answer 1

如果您希望使用CSS3渐变来执行此操作,请尝试将以下内容添加到选择器.

因此,例如,如果要应用渐变background-attachment,则在CSS渐变之后添加此渐变.重要说明:您必须在后台属性后添加此项.

#background

w3schools.org:CSS后台附件属性

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

#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;
}