用 css 固定渐变背景

Fixed gradient background with css

提问by d512

I would like for my page to have a gradient background flowing from top to bottom. I want the background to act like a fixed image in that the gradient stretches from the top of the current browser viewport to the bottom and looks the same as you scroll up and down the page. In other words, it does not repeat when you scroll. It stays fixed in place.

我希望我的页面有一个从上到下流动的渐变背景。我希望背景像固定图像一样，因为渐变从当前浏览器视口的顶部延伸到底部，并且在您上下滚动页面时看起来相同。换句话说，滚动时它不会重复。它保持固定到位。

So what I want is this:

所以我想要的是这个：

and after scrolling to the bottom you see this

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

Notice that the gradient looks exactly the same on the bottom of the page as it does on the top. It goes from full yellow to full red.

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

The best I'm actually able to do is having the gradient span the entire content of the page instead of just the viewable portion, like this:

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

and the bottom looks like this:

底部看起来像这样：

Notice here that the gradient spans the entire length of the content, not just what is currently visible. So at the top of the page you see mostly yellow and at the bottom of the page you see mostly red.

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

I suppose I could solve this using an image stretched in the y plane and repeated in the x plane but I'd rather not do this since if possible since stretching the image might leading to a blocky, non granular looking gradient. Can this be done dynamically with just CSS?

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

回答by ScottA

If you wish to do this using CSS3 gradients, try using the background-attachmentproperty

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

For example, if you are applying your gradients to #background, then add this after the CSS gradient.

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

background-attachment: fixed;

background-attachment: fixed;

Note: You must add background-attachmentafterthe background properties.

注意：您必须background-attachment在背景属性之后添加。

Your entire code might look like this:

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

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

回答by Michael Lawton

html {
  height: 100%;
  /* fallback */
  background-color: #1a82f7;
  background: url(images/linear_bg_2.png);
  background-repeat: repeat-x;

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #2F2727, #1a82f7);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #2F2727, #1a82f7);

  /* IE 10 */
  background: -ms-linear-gradient(top, #2F2727, #1a82f7);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #2F2727, #1a82f7);
}

http://css-tricks.com/examples/CSS3Gradient/
http://css-tricks.com/css3-gradients/

http://css-tricks.com/examples/CSS3Gradient/
http://css-tricks.com/css3-gradients/

Depending on what browsers you support, you may or may not want an image fallback. If not, you might want to include the filterand -ms-filtersyntax instead to allow for IE 6-8. Even without this or an image it will fallback to the background-color

根据您支持的浏览器，您可能需要也可能不需要图像回退。如果没有，您可能希望包含filterand-ms-filter语法以允许 IE 6-8。即使没有这个或图像，它也会回退到background-color

回答by Senpai.D

I guess using the ::beforepseudo-element can be an option as well, thanks for the background-attachment@ScottA great one

我想使用::before伪元素也是一种选择，感谢background-attachment@ScottA

article {position:relative}
article:before {
  content: '';
  height:100vh;
  width:100%;
  position: fixed;
  top: 0;
  z-index:-1;
  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 );
  
}

<article> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

回答by c-smile

Another way of doing this (with actual image):

另一种方法（使用实际图像）：

body {
  background-attachment: local; // or 'fixed' here
  background-image: url(fancy.jpg);
  background-size: 100% 100%;
  overflow:auto;
  box-sizing:border-box;
  width:100%;
  height:100%;
  margin:0; 
}