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

Answer 2

我对 CSS 的尝试 :)

Codepen 示例：http://cdpn.io/hzBav

CSS（淡出更新）

figure {
  display: inline-block;
  position: relative;
}

.overlay {
  display: block;
  height: 300px;
  position: absolute;
  width: 300px;

  background-image: -moz-linear-gradient(
  rgba(0, 0, 0, 0.8) 0%, rgba(255, 255, 255, 0) 85%
  );
}

.overlay:after {
  content: '';
  display: block;
  height: 300px;
  width: 300px;

  background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%
  );
}

HTML

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

基于 cmets 更新。