Question

是否可以动态剪切HTML div的某个区域并查看其下方的HTML并与之交互？

例如，假设我有一个以其他HTML内容为中心的500x500混合HTML内容。现在我想在顶部内容中打一个圆孔，这样我就可以看到它下面的内容并与之交互。有可能吗？

我认为他们称之为屏蔽或淘汰。

Answer 1

如果您需要与下方的部分（通过剪切区域）进行交互，那么在我看来使用clip-path将是正确的选项。面具显示下面的部分，但他们通过使顶部元素的切出区域透明来完成它。因此，当存在任何类型的交互时（即使在切出区域中），它实际上仅发生在顶部元素上。使用clip-path时，切出的区域是完全空白的，顶部元素没有任何内容。因此，当该部分悬停时，那里的交互就直接位于底部元素上。

剪辑路径演示：（当剪切区域悬停时，底部元素的背景会发生变化）

.example {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 10px;
}
.example div {
  position: absolute;
  height: 100%;
  width: 100%;
}
.bottom-layer {
  background: beige;
}
.bottom-layer:hover {
  background: chocolate;
}
.top-layer {
  background: tomato;
}
.top-layer:hover {
  background: hotpink;
}
#example1 .top-layer {
  clip-path: url(#circle);
}
#example2 .top-layer {
  clip-path: url(#pentagon);
}

<div class='example' id='example1'>
  <div class='bottom-layer'>Some content</div>
  <div class='top-layer'>Top content</div>
</div>
<div class='example' id='example2'>
  <div class='bottom-layer'>Some content</div>
  <div class='top-layer'>Top content</div>
</div>

<!-- the clip-path definition -->

<svg height="0" width="0">
  <defs>
    <clipPath id='pentagon' clipPathUnits='objectBoundingBox'>
      <path d='M0.25,0.25 0.75,0.25 0.75,0.5 0.5,0.75 0.25,0.5 0.25,0 0,0 0,1 1,1 1,0 0.25,0z' />
    </clipPath>
    <clipPath id='circle' clipPathUnits='objectBoundingBox'>
      <path d='M0.25,0.5 A0.25,0.25 0 1,1 0.75,0.5 L1,0.5 1,0 0,0 0,0.5 0.25,0.5 
               M0.75,0.5 A0.25,0.25 0 1,1 0.25,0.5 L0,0.5 0,1 1,1 1,0.5 0.75,0.5' />
    </clipPath>
  </defs>
</svg>

样品面膜（悬停在裁剪区域对底部元素没有影响）

.example {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 10px;
}
.example div {
  position: absolute;
  height: 100%;
  width: 100%;
}
.bottom-layer {
  background: beige;
}
.bottom-layer:hover {
  background: chocolate;
}
.top-layer {
  background: tomato;
}
.top-layer:hover {
  background: hotpink;
}
#example1 .top-layer {
  -webkit-mask-image: radial-gradient(circle farthest-side at 50% 50%, transparent 50%, white 50%);
}
#example2 .top-layer {
  -webkit-mask-image: linear-gradient(to top left, white 50%, transparent 50%);
}

<div class='example' id='example1'>
  <div class='bottom-layer'>Some content</div>
  <div class='top-layer'>Top content</div>
</div>
<div class='example' id='example2'>
  <div class='bottom-layer'>Some content</div>
  <div class='top-layer'>Top content</div>
</div>

掩盖元素的一个区域以查看下方区域并与之交互

1 个答案: