css - 带有图像标签的 anchor 链接上的线性渐变

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

将 anchor 显示为 block 元素:

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

JSFiddle