图像边界上的渐变不透明度答案

【问题标题】：Gradient opacity on borders of image图像边界上的渐变不透明度
【发布时间】：2017-03-30 19:08:38
【问题描述】：

我想只在图像的边界上将渐变不透明度从 100% 设置为 0%。

例如，我可以像这里那样在图像的一个方向上制作渐变不透明度（底部有渐变）

  .opacitygradient{
  -webkit-mask-image: -webkit-gradient(linear, left top, 
    left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    }

&lt;img src="http://placehold.it/300x300" class="opacitygradient"&gt;

但我希望在每一侧（所有边框）都有 10px 的渐变，而不是像上面的 sn-p 那样只有一个方向。
有什么想法吗？

【问题讨论】：

你有你想要的结果的示例图像吗？

标签： css gradient opacity

【解决方案1】：

要屏蔽图像，您可以执行此操作。诀窍是使用两个线性渐变作为图像容器的背景，一个是水平的，一个是垂直的，中间是透明的，边缘是全白的。
（请注意，如果页面背景不是白色，则 rgbas 必须使用 255,255,255 以外的其他值。）

.container {
  display: inline-block;
  background:
    linear-gradient(0deg, rgba(255,255,255,1), rgba(255,255,255,0) 5%,
      rgba(255,255,255,0) 95%, rgba(255,255,255,1)),
    linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0) 5%,
      rgba(255,255,255,0) 95%, rgba(255,255,255,1));
}

.opacitygradient {
  vertical-align: top;
  position: relative;
  z-index: -1;
}

<div class="container">
  <img src="http://placehold.it/300x300" class="opacitygradient">
</div>

作为奖励，它适用于所有浏览器，而不仅仅是那些理解 mask-image 的浏览器。

【讨论】：

TY 回答。很近。有没有办法让这个渐变更“方形”？我的意思是让图片像每边 10 像素或 20 像素一样会有渐变。
啊，这不是很清楚。查看我的编辑；这样更好吗？
谢谢 :)，@“页面背景” - 背景现在是白色的，但它可能会改变，所以也感谢您的提醒。