在背景图像周围创建渐变

Question

我尝试在>背景图像周围应用渐变效果，但我无法接近。我可以弄清楚如何将渐变应用到图像的底部。有人可以帮忙吗？

当前代码：

＆＃13;

＆＃13;

body {
  background: black;
}

.backgroundImg {
  position: absolute;
  top: 0px;
  left: 0px;
  size: contain;
  width: 1000;
  height: 10;
  z-index: 1;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)))
}

＆＃13;

<div class="container">
  <img src="http://image.tmdb.org/t/p/w1000/dpo7WDOhWtACY6oflrqxutbhg81.jpg" class="backgroundImg">
</div>

＆＃13;

＆＃13;

＆＃13;

预期结果

Answer 1

您正在寻找：-webkit-radial-gradient();

有关详细信息，请参阅：CSS Visual Effects Guide

示例：

body {
  background: black;
}
.backgroundImg {
  position: absolute;
  top: 0px;
  left: 0px;
  size: contain;
  width: 1000;
  height: 10;
  z-index: 1;
  -webkit-mask-image: -webkit-radial-gradient(white, transparent 80%);
}

<div class="container">
  <img src="http://image.tmdb.org/t/p/w1000/dpo7WDOhWtACY6oflrqxutbhg81.jpg" class="backgroundImg">
</div>