使用css，图像不透明度从0到1

我希望我的图像如下所示：

图像的底部是透明的，顶部是不透明度1。 我可以用颜色和线性渐变来实现这种效果：

-webkit-linear-gradient(black, transparent);

---

但是也可以使用图像吗？

我知道的最新最酷的方法是使用HTML5掩码

事情是这样的：

CSS:

.masked
{
    mask: url(#m1); 
}

<svg width="0" height="0">
  <defs>
    <linearGradient id="gradient" x1="0" y1="0" x2 ="0" y2="100%">
      <stop stop-color="white" offset="0"/>
      <stop stop-color="black" offset="1"/>
    </linearGradient>

    <mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <rect y="0.1" width="1" height="0.9" fill="url(#gradient)" />
    </mask>
  </defs>
</svg>

<svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="350">
    <image xlink:href="http://upload.wikimedia.org/wikipedia/commons/4/4d/Iss007e10807_darker.jpg"
           width="500" height="350" class="masked"></image>
</svg>

HTML5:

.masked
{
    mask: url(#m1); 
}

<svg width="0" height="0">
  <defs>
    <linearGradient id="gradient" x1="0" y1="0" x2 ="0" y2="100%">
      <stop stop-color="white" offset="0"/>
      <stop stop-color="black" offset="1"/>
    </linearGradient>

    <mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <rect y="0.1" width="1" height="0.9" fill="url(#gradient)" />
    </mask>
  </defs>
</svg>

<svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="350">
    <image xlink:href="http://upload.wikimedia.org/wikipedia/commons/4/4d/Iss007e10807_darker.jpg"
           width="500" height="350" class="masked"></image>
</svg>

---

进一步阅读：

• （）

我的CSS尝试：）

代码笔示例：

CSS（淡出更新）

HTML

<figure>
  <div class='overlay'></div>
  <img src='http://placekitten.com/300/300' />
</figure>

---

根据评论进行更新。

图像背后是什么？使用带透明度的静态PNG，还是需要设置动画？javascript和画布无法修复任何问题。嗯，是的，我可以使用普通图像。但是现在如何用css或其他什么东西来实现这一点很有趣，也许我想给它制作动画（是的；）图像后面是身体的背景图像。这很好，但图像不会变得透明。我已经想到了，但问题是你可以“淡出”，例如，如果你有黑色背景，你可以使用这种方法。但这并不能解决真正的问题。我已经更新了，但不是很成功，因为现在你几乎看不到图像，哈哈！哇，首先谢谢你。但现在我必须删除每一行，看看它是做什么的，以及它是如何工作的^^这只是一个例子。花10分钟阅读相关内容，并查看现场示例。没那么复杂。哦，我看到你刚刚在sryVery nice网站上发布了一个例子，另一个聪明的解决方案！嗯，谢谢，但它不起作用。Chrome能够做到这一点吗？等等，我试试ie。编辑：不，他不是为了：(