Question

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

还有一个问题是关于为什么背景在body和html标签上有特殊行为。

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

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

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

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

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

应该出现的唯一行为是渐变应该保持固定。就是这样。因为这就是使用这个属性的。

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

Answer 1

当你说：

＆＃34; ...但是当我们在身体标签上添加渐变作为背景时，它会伸展到整个页面。现在我已经研究过渐变应该有效像那样。 ...＆＃34;

你错了。渐变不应该像那样工作。渐变只是background-image。就是这样。它们的行为类似于背景图像，因为它们是背景图像。

原因是，您认为该行为不因为它们应该像那样工作。这样的工作之所以是因为它们是图像。但是，您尚未明确定义大小。因此，如果没有明确的大小，他们就不具备内在规模。这就是为什么它们匹配它们所在元素的大小。

从此Ref： https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

..与任何其他渐变一样，CSS线性渐变不是CSS 颜色，但没有内在尺寸的图像;就是说，它有不是自然的或优选的大小，也不是比例。它的具体尺寸会匹配它适用的元素之一......

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

演示小提琴：http://jsfiddle.net/abhitalks/comsxw8m/

与相关CSS的代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

示例2：

看到这个小提琴：http://jsfiddle.net/abhitalks/comsxw8m/1/

此处，渐变应用于具有固定大小的身体并重复。另一个渐变应用于div fixed。希望现在你能让这个想法更清晰。

Snippet 2 ：

＆＃13;

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

＆＃13;

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

＆＃13;

为什么background-attachment：fixed会使渐变出现在整个页面上？

1 个答案:

示例2：