使用css将图像转换为成形框架

Question

我想将上传的图片保留在六边形框架内。我从this website生成了css，它在某些浏览器中运行正常。

代码：

.frame-1 {
  width: 300px;
  height: 320px;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 98%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 98%, 0% 75%, 0% 25%);
}

但是，它不适用于像firefox等其他主流浏览器。

所以，我尝试在主图像上使用透明背景形状的图像。但是，我无法让它发挥作用！

代码：

<div class="frame-2">
  <img src="image.jpg">
  <div class="mask"></div>
</div> 

.frame-2 {
  width: 300px;
  height: 320px;
  position: relative;
}
.mask {
  background: url('http://i.imgur.com/M40TJ9Z.png') no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0
}

支持所有主流浏览器的最佳方法是什么？提前谢谢。

Fiddle Work Demo