Html css渐变图像链接不工作

朋友们好，我试着在封面上做渐变效果的照片。但链接不起作用。 当你点击图片时，我想被重定向到另一个页面。 这是我的演示

HTML代码：

<div class="container">  
  <a href="www.facebook.com"><img src="http://lorempixel.com/1920/480/"> </a>
</div>

body {
  background: #000;
}

.container {
  max-width: 1920px;  
  background-image: -moz-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
  background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );

}

img {
  max-width: 100%;
  position: relative;
  z-index: -1;

}

---

将链接环绕容器：

<a href="www.facebook.com"><div class="container">  
    <img src="http://lorempixel.com/1920/480/" />
</div></a>

---

另一种解决方案是将图像的

z索引

更改为正数：

img {
  max-width: 100%;
  position: relative;
  z-index: 1;
}