html - 悬停多个 SVG 多边形时的图像 z-index

Question

我在这里处理 SVG 我的概念是我有两个图像 .overlap 并且使用 svg 多边形我制作了五个不同的三 Angular 形。我的目标是实现第一次覆盖完整的图像显示，当鼠标悬停在三 Angular 形背景上时 .box 框图像需要显示。这是我在提供叠加图像之前的初始代码。

.box {
  position: relative;
  background-image: url('https://picsum.photos/id/1/1000/800');
  background-repeat: no-repeat;
  width: 100%;
  height: 600px;
  background-size: cover;
}

polygon {
  stroke-width: 1;
  stroke: red;
  fill: #ffffff;
}

polygon:hover {
  fill: transparent;
}

<div class="box">
  <svg viewbox="0 0 200 100">
		<polygon points="0,100 100,100 0,50 "
			    style="stroke:#000000;"/>
		<polygon points="0,50 100,100 50,00 0,0 "
			    style="stroke:#000000;"/>
		<polygon points="100,100 50,00 150,0"
			    style="stroke:#000000;"/>
		<polygon points="100,100 200,50 200,0 150,0"
			    style="stroke:#000000;"/>
		<polygon points="100,100 200,100, 200,50"
			    style="stroke:#000000;"/>
	</svg>
</div>

现在我添加了叠加图像，需要放在 .box 图像和 polygons 形状之上。现在，悬停我想在当前的多边形形状中显示 .box 图像，如下所示

代码在这里

.box {
  position: relative;
  background-image: url('https://picsum.photos/id/1/1000/800');
  background-repeat: no-repeat;
  width: 100%;
  height: 600px;
  background-size: cover;
}

polygon {
  stroke-width: 1;
  stroke: red;
  fill: #ffffff;
}

polygon:hover {
  fill: transparent;
}

.overlay:hover polygon {
  z-index: 100;
}

.overlay {
  position: absolute;
  background-image: url('https://picsum.photos/id/118/1000/800');
  background-repeat: no-repeat;
  width: 100%;
  height: 600px;
  background-size: cover;
  z-index: 10;
}

<div class="overlay"></div>
<div class="box">

  <svg viewbox="0 0 200 100">
		<polygon points="0,100 100,100 0,50 "
			    style="stroke:#000000;"/>
		<polygon points="0,50 100,100 50,00 0,0 "
			    style="stroke:#000000;"/>
		<polygon points="100,100 50,00 150,0"
			    style="stroke:#000000;"/>
		<polygon points="100,100 200,50 200,0 150,0"
			    style="stroke:#000000;"/>
		<polygon points="100,100 200,100, 200,50"
			    style="stroke:#000000;"/>
	</svg>
</div>

谁能帮我解决悬停问题，我们需要调整 div 和多边形填充的 z 索引。

Answer 1

我会调整 my previous answer 的代码如下所示:

.box {
  width:450px;
  height:250px;
  position:relative;
  overflow:hidden;
  z-index:0;
  background:url(https://picsum.photos/id/13/1000/800) center/cover;
}
.box > div {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-size:cover;
  background-position:center;
  opacity:0;
}
.box > div:nth-child(1) {
  clip-path:polygon(20% 0,80% 0, 50% 100%);
}
.box > div:nth-child(2) {
  clip-path:polygon(0 0, 20% 0,50% 100%,0 40%);
}
.box > div:nth-child(3) {
  clip-path:polygon(100% 0,80% 0,50% 100%,100% 40%);
}

.box > div:nth-child(4) {
  clip-path:polygon(0 100%,50% 100%,0 40%);
}
.box > div:nth-child(5) {
  clip-path:polygon(100% 100%,50% 100%,100% 40%);
}

.box > div:hover {
   opacity:1;
}

<div class="box">
  <div style="background-image:url(https://picsum.photos/id/1/1000/800)"></div>
  <div style="background-image:url(https://picsum.photos/id/10/1000/800)"></div>
  <div style="background-image:url(https://picsum.photos/id/90/1000/800)"></div>
  <div style="background-image:url(https://picsum.photos/id/102/1000/800)"></div>
  <div style="background-image:url(https://picsum.photos/id/118/1000/800)"></div>
</div>

这是一个插图，向您展示clip-path

中使用的不同点

同一张图片:

.box {
  width:450px;
  height:250px;
  position:relative;
  overflow:hidden;
  z-index:0;
  background:url(https://picsum.photos/id/13/1000/800) center/cover;
}
.box > div {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image:url(https://picsum.photos/id/118/1000/800);
  background-size:cover;
  background-position:center;
  opacity:0;
}
.box > div:nth-child(1) {
  clip-path:polygon(20% 0,80% 0, 50% 100%);
}
.box > div:nth-child(2) {
  clip-path:polygon(0 0, 20% 0,50% 100%,0 40%);
}
.box > div:nth-child(3) {
  clip-path:polygon(100% 0,80% 0,50% 100%,100% 40%);
}

.box > div:nth-child(4) {
  clip-path:polygon(0 100%,50% 100%,0 40%);
}
.box > div:nth-child(5) {
  clip-path:polygon(100% 100%,50% 100%,100% 40%);
}

.box > div:hover {
   opacity:1;
}

<div class="box">
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>