是否可以覆盖父元素的背景以显示祖父元素的背景？

Question

假设我有以下内容：

<div id="grandparent" style="background:some-image">
 <div id="parent" style="background-color:white">
  <div id="child" style="something">

  </div>
 </div>
</div>

是否可以在#child 中使用CSS 覆盖#parent 的白色背景并显示#grandparent 的图像？

（这是为了视差滚动效果，其中简单地删除 #parent 不是一个选项）

提前致谢！

Answer 1

不，DIV 不像 photoshop 中的蒙版。但是你可以做的是通过使用 background-position: fixed 为祖父母和 child 放置相同的背景图像并添加相应的 background-offset 或者，如果你喜欢，通过使用 JS 来模仿这种效果根据它相对于祖父母的位置动态地重新计算 child 背景偏移 - 并不像听起来那么难。

还有CSS3bachround定位，像这样background-position: calc(100% - 20px) calc(100% - 10px);

是否可以覆盖父元素的背景以显示祖父元素的背景？

Is it possible to override the background of a parent element to show the background of a grandparent element?

css

background

overriding

parallax