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

时间:2015-08-24 08:41:29

标签: css background anchor

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

    <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。您是否知道如何再次启用链接

1 个答案:

答案 0 :(得分:1)

将锚点显示为块元素:

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

JSFiddle