剪辑路径css男子图像不显示在div上
剪辑路径css男子图像不显示在div上
提问于 2018-09-25 06:35:04
请帮我解决这个问题，图像不工作的z索引时，div在剪辑路径。如何轻松地对图像进行z索引，谢谢
请检查我的代码:-
.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
请检查并告诉我如何解决这个问题。
回答 1
Stack Overflow用户
发布于 2018-09-25 07:17:29
您需要将.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52491975
复制相关文章
相似问题
SVG剪辑-不工作在div上的路径
带有圆角路径的图像上的CSS剪辑
使用移动div作为CSS剪辑路径
不使用图像将CSS剪辑路径转换为SVG剪辑路径
CSS剪辑/剪辑-路径等效
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
