时间戳

首页 > 解决方案 > 剪辑路径 css 男性图像未显示在 div 上

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

问题描述

请帮我解决这个问题，当 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

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

标签： htmlcss

解决方案

您需要将 .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>

推荐阅读