Question

我想要一个背景渐变，例如

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(2, 126, 174, 0.9))

在我的文件正文中，横跨整个身体的高度 - 并与身体滚动。

使用

background-attachment: fixed;

我得到了（视口的）整个高度，但是它保持固定。

background-attachment: scroll;

让我滚动，但它只是延伸到视口高度。

任何方式来获得两者？

修改

正如Boltclock指出的那样，我确实在基本测试页上使用'background-attachment：scroll'获得了预期的行为。

用

<body>
   <div id="stretch">Content</div>
</body>

和

  body {
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(2, 126, 174, 0.9));
  }

  #stretch {
     height: 2000px;
  }

一切正常：渐变遍及整个身体（身体高2000像素），并滚动内容。

然后我添加

  html, 
  body {
     height: 100%;
  }

这是页面所基于的基本模板所做的事情。

为了让身体再次展开，我添加了

  height: auto;

并且身体恢复到2000px高度。

但是，渐变保持在HTML高度 - 然后重复。

我在这里缺少什么？

Answer 1

这是因为梯度背景的大小根据其容器（包括html和body）以及用于确定html的维度的计算和body分别对应于视口。

我在回答another question之前，实际上已经写了类似的东西。你的有点不同，所以我先引用相关部分：

应用于body和/或html时，背景为special behavior。当您在不触及body的情况下将背景应用于html时，会发生身体背景传播到视口的情况，并且该背景就像在html上声明一样：


对于其根元素是HTML HTML元素或XHTML html元素的文档：如果根元素上的'background-image'的计算值为'none'且其'background- color'是'透明'，用户代理必须从该元素的第一个HTML BODY或XHTML body子元素传播背景属性的计算值。 BODY元素的背景属性的使用值是它们的初始值，传播的值被视为在根元素上指定它们。

在您的情况下，如果您使用的模板未指定html或body的任何背景，则此背景传播行为会导致渐变占据{的高度{1}}代替html。

要解决此问题，您只需重置body元素的height值，然后分配html：

min-height

这将删除html { height: auto; min-height: 100%; }元素上的高度约束，允许渐变与页面内容一起拉伸，同时如果页面内容不足，则保持至少与视口一样高（如果这不重要，则无需设置html）。

Answer 2

这是（添加你需要的任何background-size）：

body
{
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(2, 126, 174, 0.9));
      background-attachment: scroll;
    background-size: 100% 900px;
    overflow: hidden;
}

这是小提琴： http://jsfiddle.net/BfH8D/1/

这是你想要的结果吗？

在没有背景附件的情况下跨越身体延伸背景渐变：已修复

2 个答案: