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之外的其他值。）

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

的浏览器

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

1 个答案: