css - 带有CSS的图像底部的渐变

Question

你好我想用图像(不是背景图像)产生这种效果:

你知道我如何用 css 创建这种效果吗？

Answer 1

看看这个:

img {
  width: 400px;
}

.content {
  background: rgba(255, 255, 255, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 10%, rgba(255, 255, 255, .1) 40%, rgba(255, 255, 255, .5) 75%, rgba(255, 255, 255, 1) 100%) repeat scroll 0 0;
  position: relative;
  margin-top: -200px;
  height: 200px;
}

<img src="http://www.dl.21tech.ir/img-upload/2016/12/95092801.jpg" />
<div class="content"></div>