带有图像标记的锚链接上的线性渐变

Question

我有这种结构，我想在其图像上应用线性渐变。

    <div class="link-img">
      <a href="#">
        <img src="images/bild.jpg" alt="">
      </a>
    </div>

所以，我设置了css：

div.link-img{
  height: 120px;
  width: 300px;
 background: linear-gradient(
     rgba(0, 82, 144, 0.7), 
     rgba(0, 82, 144, 0.7)
   );
}

div.link-img img{
  height: 120px;
  width: 300px;
  position:relative;
  z-index:-1;
}

这是我能找到的唯一方法。它的问题是，链接被禁用，因为z-index：-1应用于img。您是否知道如何再次启用链接

Answer 1

将锚点显示为块元素：

div.link-img > a{
    display: block;
}

JSFiddle