css - cssで0から1までの画像の不透明度

Question

画像を次のように表示したい：

画像の下部は透明で、上部は不透明度 1 になっています。線形グラデーションを使用して、この効果を色で行うことができます。

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

しかし、画像でも可能ですか？

Answer 1

私のCSSでの試み:)

コードペンの例: 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>

コメントに基づいて更新します。