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

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为祖父母和孩子放置相同的背景图像并添加相应的背景偏移来模仿这种效果，或者，如果你愿意，通过使用JS动态重新计算子背景偏移取决于在它相对于祖父母的位置 - 它听起来并不那么难。

此外，还有CSS3 bachround定位，如background-position: calc(100% - 20px) calc(100% - 10px);