剪辑路径 css 男性图像未显示在 div 上答案

【问题标题】：clip-path css men image not show up on div剪辑路径 css 男性图像未显示在 div 上
【发布时间】：2018-09-25 17:23:02
【问题描述】：

请帮我解决这个问题，当 div 在剪辑路径上时，图像不能工作 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>

这里是 codepen 链接：- https://codepen.io/anon/pen/JaQoOX

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

【问题讨论】：

我不确定您要做什么，但 background-image 没有加载，这可能会造成混淆。托管服务器似乎拒绝了该请求。尝试另一张图片。
您好@PerSalbark 感谢您的精彩回复。请检查codepen链接，谢谢这里是codepen链接：-codepen.io/anon/pen/JaQoOX
编辑问题请查收

标签： html css

【解决方案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>

【讨论】：

您可以通过将mymap 设为伪元素来进行优化