时间戳

首页 > 解决方案 > 有没有办法通过底层组件层进行射线照相

javascript - 有没有办法通过底层组件层进行射线照相

问题描述

任务描述：

有一个元素包含另一个元素，而另一个元素又包含另一个元素（理论上可以有一系列内部元素）。最后一个元素的背景设置为透明。任务是这种透明度将一直下降到第一个外部元素的背景。

因此，在下面的示例中，.shouldRadiographElement 区域的背景应该是黄色的，作为 .wrapper 元素的背景。

如果需要对任务进行一些澄清，请在评论中提问。

.wrapper {
  width: 200px;
  height: 200px;
  background: yellow;
}

.element {
  width: 100px;
  height: 100px;
  background: green;
}

.shouldRadiographElement {
  width: 50px;
  height: 50px;
  border: 1px solid white;
  background: transparent;
}
<div class="wrapper">
  <div class="element">
    <div class="shouldRadiographElement"></div>
  </div>
</div>

标签： javascripthtmlcssz-indextransparency

解决方案

您可以在第二个 Div 上使用 Clip-path 属性，如下所示

.wrapper {
  width: 200px;
  height: 200px;
  background: yellow;
}

.element {
  width: 100px;
  height: 100px;
  background: green;
  clip-path: polygon(0% 0%, 0 54%, 0 55%, 0 0, 55% 0, 56% 53%, 0 53%, 0 100%, 
  100% 100%, 100% 0%);
}

.shouldRadiographElement {
  width: 50px;
  height: 50px;
  border: 1px solid white;
  background: transparent;
}
<div class="wrapper">
  <div class="element">
    <div class="shouldRadiographElement"></div>
  </div>
</div>

推荐阅读