0

我有一个带有向后和重叠img（位置：绝对；顶部：0px；左侧：10px；）链接的img，带有-webkit-clip-path：polygon（0px 150px，200px 150px，100px 0px）；。

但是：可见区域中 img.clip-path 下的链接不起作用。

这个问题是怎么解决的？可以用 SVG 创建另一个布局吗？

PS：z-index 和 position:relative 链接不起作用。SVG+clipPath 不起作用。

演示：http: //jsfiddle.net/9fjv4wbr/

img { width: 220px;  margin: 20px; }
img:hover { opacity: 0.5; }

.absolute { position: absolute; top:0px; left: 10px; }
.back { width: 600px; }

.clip-polygon {
  -webkit-clip-path: polygon(0px 150px,200px 150px,100px 0px);
}

body {
  background: linear-gradient(
    to bottom,
    #999,
    #eee
  );
}

body, html {
  height: 100%;
}
<a href="http://www.google.com/"><img src="http://testp.infinityyazilim.com/IlkayOzturk/img/title_mentor.png" class="back"></a>
    
<a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" alt="" class="absolute clip-polygon"></a>

4

0 回答 0