Html 为什么背景附件：修复使渐变显示在整个页面上？

我已经研究了5个问题，但都是关于如何做的

有一个问题还谈到了为什么背景在主体和html标记上有特殊的行为

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

我的意思是，让我们以200 x 200像素的图像作为背景。即使我们滚动页面，它也会保持不变。（假设

后台附件：已修复；

属性已应用）

但当我们在body标签上添加渐变作为背景时，它会延伸到整个页面。现在我已经研究了梯度应该是这样工作的。好的，我明白了。但当

后台附件：固定时，它不会出现在整个页面上。相反，它会重复

为什么
background attachment:fixed
会使渐变延伸到整个页面？当我们使用普通图像时，不会发生这种情况

所以我的问题是：当我们应用
后台附件：fixed
属性时，为什么会出现这种行为

唯一应该发生的行为是梯度应该保持不变。就这样。因为这就是这个属性的用途

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


身体
{
背景：线性梯度（天蓝色、橙色）；
背景附件：固定；
}
当你说：

“…但当我们在body标签上添加渐变作为背景时，它会拉伸
到整个页面。现在我已经研究了梯度应该是有效的
像那样……”

你错了。梯度是而不是应该是这样工作的。渐变只是背景图像

。就这样。它们的行为类似于背景图像，因为它们是背景图像

原因是，你看，这种行为并不是因为他们应该这样工作。这样工作的原因是因为它们是图像。但是，您尚未明确定义大小。因此，如果没有显式大小，它们就不能有内在大小。这就是它们匹配所在元素大小的原因

从本参考文件：

。。像任何其他渐变一样，CSS线性渐变不是CSS 颜色只是一个没有内在维度的图像；就是,它有, 既不是自然尺寸也不是首选尺寸，也不是比例。它的具体尺寸将 匹配它应用于的元素之一

为了达到您想要的效果，您需要应用与

背景图像

相关的所有属性。具体来说，

背景大小

，

背景位置

。完成后，您需要定义渐变

演示小提琴：

带有相关CSS的代码片段：

正文{
背景图像：线性渐变（至底部，#fff 0%，#00f 100%）；
背景重复：无重复；
背景尺寸：120px 120px；
背景位置：上中；
背景附件：固定；
}

---

Lorem ipsum door sit amet，一位杰出的领导者，他在劳动和生活中的时间是有限的。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎，不能因为工作上的过失而伤害到动物和动物。
知识产权不受保护，不受教育，不受劳动和巨大损失的影响。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎，不能因为工作上的过失而伤害到动物和动物。
知识产权不受保护，不受教育，不受劳动和巨大损失的影响。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔不自以为是的丘比特之外，还必须为自己的行为负责。

你能用小提琴来证明你的问题吗？看看这个：正如你在代码中看到的，梯度正在延伸。删除背景附件属性，它将重复。现在你有问题了吗？你有没有试过一个小例子，说明它没有按你期望的方式工作？不要链接到外部资源。在你的问题中加入相关代码。如果你不改进你的问题，它很可能很快就会被关闭。是的，这看起来很奇怪@VipulcoolruleBackground大小也不起作用“默认情况下，渐变会拉伸以填充它定义的元素。”-developers.mozilla.org你的回答仍然没有多大帮助。仅应用背景附着属性时，为什么渐变会拉伸？我的意思是，它应该只出现一次，然后它应该保持不变。不是吗？我会给你一些时间考虑你的答案。如果我还有任何疑问，我会回复。@Vipulcoolrule:参考文档，它说：“……像任何其他渐变一样，CSS线性渐变不是CSS，而是没有内在维度的图像；也就是说，它既没有自然的或首选的大小，也没有比率。它的具体大小将与它所应用的元素的大小相匹配……”。这里：所以，

背景附件

对其大小没有任何意义。这只取决于

背景大小

和

背景位置

和

背景重复

@Vipulcoolrule:我已经在答案中添加了这一点。我希望现在一切都清楚了。