背景附件到底是做什么的？答案

【问题标题】：What does background-attachment exactly do?背景附件到底是做什么的？
【发布时间】：2020-12-27 07:23:17
【问题描述】：

我在写background: inherit;的时候在想，它应该准确地获取所有父属性，根据它，应该复制子元素的背景，对吧？

但是今天当我使用背景附件时，我遇到了一个奇怪的结果，似乎当我们使用background-attachment: fixed; 时没有进一步的继承：

body{
  background-image: url('https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg ');
  background-attachment: fixed;
}

#first{
  margin:80px 160px;
  background: inherit;
  border: dotted;
  width: 200px;
  height: 200px;
}

&lt;div id="first"&gt;&lt;/div&gt;

如您所见，上面代码的结果似乎与#first{ background:transparent; ...}等价。

谁能解释为什么background-attachment: fixed;会发生这种情况？我在网上搜索了但我找不到我的答案，几乎所有的网站都给我同样的不合理的解释：

background-attachment 属性指定背景是否图像应该滚动或固定（不会与其余部分一起滚动页）：

【问题讨论】：

不，继承就好了。碰巧您以一种没有视觉效果的方式使用它，因为您通过使用两个嵌套 div 中的背景隐藏效果。尝试只将背景添加到 div 而不是 body，你会明白的。
@GabrielePetrioli，谢谢，将背景添加到 div 而不是正文非常好:) 你能以答案的形式写下你的评论吗？然后我接受它并关闭问题。
这就是 background-attachment 的全部技巧：fixed：在不同的元素中使用相同的背景，让它看起来只有一个。
@TemaniAfif 正是如此，它非常有用。

标签： html css frontend background-attachment

【解决方案1】：

背景附件设置背景图像是随页面其余部分滚动还是固定的属性。 这就像图像的相对位置

【讨论】：