2

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

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

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

但是图像也可以吗？

4

2 回答 2

2

我知道的最新和最酷的方法是使用 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 演示

进一步阅读：

于 2013-08-27T21:30:21.567 回答
0

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

根据评论更新。

于 2013-08-27T21:38:23.630 回答