在背景图像周围创建渐变答案

【问题标题】：Create a gradient around a background image在背景图像周围创建渐变
【发布时间】：2015-11-26 20:30:57
【问题描述】：

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

当前代码：

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)))
}

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

预期结果：

【问题讨论】：

有什么问题？我可以看到渐变。
我觉得我说得不够清楚。我希望渐变围绕图像。
你能创建一个你想要的截图吗？我发现在左上角的某物周围可视化渐变是不同的。此外，您的 CSS 中有错误：width 和 height 属性缺少单位。而-webkit-mask-image 仅适用于 Chromium。
这样的。

标签： css image gradient

【解决方案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>

【讨论】：

相关：stackoverflow.com/questions/2504071/…