css - 使用CSS将图像不透明度从0变为1

Question

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

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

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

但是图像也可以吗？

Answer 1

我所知道的最新、最酷的方法是使用 HTML 5 掩码。

事情是这样的:

CSS:

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

HTML 5:

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

jsFiddle Demo

---

进一步阅读:

• Applying SVG effects to HTML content (Live example)
• CSS Masking
• Create Vector Masks using the HTML5 Canvas