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

Question

我只想将渐变不透明度从 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)));
    }

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

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

Answer 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 的浏览器。

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

Gradient opacity on borders of image

css

gradient

opacity