带有图像标签的锚 link 上的线性渐变

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;
}

这是我能找到的唯一方法。它的问题是，link 由于 z-index:-1 应用于 img 而被禁用。您是否知道如何再次启用 link

Answer 1

将锚点显示为块元素：

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

JSFiddle

带有图像标签的锚 link 上的线性渐变

linear gradient over an anchor link with image tag

css

anchor

background