html - 剪辑路径 css 男士图像未显示在 div 上

Question

请帮我解决这个问题，当 div 在 clip-path 上时图像不工作 z-index。我如何通过 z-index 轻松生成图像谢谢

请检查我的代码:-

.mymap {
  background-image: url("https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&h=350");
  background-repeat: no-repeat;
  -webkit-clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
  clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
}

.mymap {
  height: 220px;
}

.men img {
  width: 20%;
}

.men img {
  z-index: 999;
  position: relative;
}

<div class="mymap">
  <div class="men">
    <img src="https://i.pinimg.com/originals/1c/01/27/1c0127d19cdd75efb5a3eca4384658d5.png">
  </div>
</div>

这是代码笔链接:- https://codepen.io/anon/pen/JaQoOX

请检查并告诉我如何解决这个问题。

Answer 1

您需要将 .mymap 和 .men 类包装到父容器中，并将 position:relative 设置为 .container 类，将 position:absolute 设置为图像。

.container{
  position:relative;
}
.mymap {
  background-image: url("https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&h=350");
  background-repeat: no-repeat;
  -webkit-clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
  clip-path: polygon(100% 0, 100% 80%, 0 80%, 0 23%);
}

.mymap {
  height: 220px;
}

.men img {
  width: 20%;
}

.men img {
  z-index: 999;
  position: absolute;
  top:0;
}

<div class="container">
  <div class="mymap"></div>
  <div class="men">
      <img src="https://i.pinimg.com/originals/1c/01/27/1c0127d19cdd75efb5a3eca4384658d5.png">
   </div>
</div>