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

进一步阅读：

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>

根据评论进行更新。

图像不透明度从0到1与css

2 个答案: