html - 为什么背景附件: fixed makes the gradient to appear on entire page?

Question

我研究了 5 个 SO 问题，但它们都在谈论如何去做。

有一道题还讲到为什么background对body和html标签有特殊行为。

但我的问题是:为什么固定附件会使渐变出现在整个页面上？

我的意思是，让我们以 200 x 200 像素的图像作为背景。即使我们滚动页面，它也会保持固定。 (假设应用了 background-attachment: fixed; 属性)。

但是当我们在 body 标签上添加渐变作为背景时，它会延伸到整个页面。现在我研究了渐变应该像那样工作。好的，我明白了。但当 background-attachment: fixed; 未指定时，它不会出现在整个页面上。它会重复。

为什么 background-attachment: fixed 使渐变在整个页面上拉伸(stretch)？当我们使用普通图像时，这不会发生。

所以我的问题是:为什么当我们应用 background-attachment: fixed 属性时会出现这种行为？

唯一应该出现的行为是梯度应该保持固定。就是这样。因为这就是这个属性的用途。

<style>
    body
    {
        background: linear-gradient(skyblue, orange);
        background-attachment: fixed;
    }
</style>

Answer 1

当你说:

"...But when we add gradient as a background on body tag, it stretches to entire page. Now I have studied that gradients are supposed to work like that. ..."

你错了。梯度不应该是那样工作的。渐变只是一个 background-image。就是这样。它们表现得像背景图像，因为它们是背景图像。

原因是，您看到行为不是，因为它们应该那样工作。之所以这样工作是因为它们是图像。但是，您没有明确定义大小。因此，如果没有明确的大小，它们就不能具有固有大小。这就是为什么它们匹配它们所在元素的大小。

来自这个引用: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

.. Like any other gradient, a CSS linear gradient is not a CSS color but an image with no intrinsic dimensions; that is, it has neither natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to...

为了实现您想要的效果，您需要应用与background-image 相关的所有属性。具体来说，background-size，background-position。完成后，您需要定义渐变。

演示 fiddle :http://jsfiddle.net/abhitalks/comsxw8m/

带有相关 CSS 的代码段:

body {
    background-image: linear-gradient(to bottom, #fff 0%, #00f 100%);
    background-repeat: no-repeat;
    background-size: 120px 120px;
    background-position: top center;
    background-attachment: fixed;
}

<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>

例子2:

看到这个 fiddle :http://jsfiddle.net/abhitalks/comsxw8m/1/

这里将渐变应用于具有固定大小的 body 并重复。另一个渐变应用于 div，它是 fixed。希望现在你的想法更清楚了。

片段 2:

body {
    background-image: linear-gradient(to bottom, #fff 0%, #0ff 100%);
    background-repeat: repeat;
    background-size: 64px 64px;
}

div {
    width: 240px; height: 240px;
    margin: 32px auto;
    overflow: auto;
    background-image: linear-gradient(to bottom, #fff 0%, #00f 100%);
    background-repeat: no-repeat;
    background-size: 120px 120px;
    background-position: center center;
    background-attachment: fixed;
}

<div><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></div>