javascript - 使元素看起来好像它们共享背景

Question

我正在开发一个待办事项网络应用程序，我正在尝试实现一种视觉效果，其中多个待办事项似乎“共享”一个背景。因此，假设用户添加了一些待办事项。它们的背景显示为单个渐变的一部分，颜色从顶部待办事项过渡到底部待办事项。这支笔应该有望展示我想要发生的事情(单击第一个 div):

Elements 'sharing' a background

HTML:

<div class="outer">
  <div class="inner"></div>
  <p>CLICK ME</p>
</div>

CSS:

.outer {
  position: absolute;
  left: 0;
  top: 0;
  height: 300px;
  width: 200px;
  background: white;
  overflow: hidden;
  clip: rect(auto, auto, auto, auto);
  transition: transform 500ms ease-in-out;
  font-size: 2rem;
}

.inner {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to right, red, orange, green, blue);
  opacity: 0.5;
}

现在这已经可以工作了，我想，但前提是我手动设置 div 位置的动画。有什么方法可以改用 CSS 转换吗？最大的问题是，一旦对外部 div 应用了转换，固定的子 div 就会停止固定，从而完全破坏了“相同背景”的错觉。你可以在这支笔中看到它:

Illusion fail

我读到它是规范的一部分，事实就是如此，但我想也许你们这里的 CSS 向导知道实现这种效果的其他方法，甚至可能没有固定的子 div。非常感谢您的帮助。

Answer 1

这是一个使用 clip-path 的示例，但一个问题是它的剪辑方式与 clip 不同，因为它只剪辑元素本身，不是它下面的子元素。子元素也会被剪裁，因此必须移动它们以匹配新的剪裁位置。

https://codepen.io/mix3d/pen/OJPjbGp