如何使用 PNG 来掩盖图像的边缘？

【问题标题】：How do I use PNGs to mask the edges of an image?如何使用 PNG 来掩盖图像的边缘？
【发布时间】：2017-12-06 09:30:32
【问题描述】：

我使用了带有 PNG 的边框图像来创建粗边框，但我想知道是否有办法以类似的方式进行遮罩？

http://www.rumchata.com/

Rumchata 符合我的要求。背景中的蓝色 gif 具有粗糙的边缘。我假设他们正在使用 PNG 纹理来掩盖 gif 的边缘。有人知道怎么做吗？

【问题讨论】：

这不是 gif，而是视频。只是为了好玩：jsfiddle.net/tLxexgw6

标签： html css image png masking

【解决方案1】：

您可以使用mask-image 和-webkit-mask-image 以他们所做的方式进行屏蔽。我在下面整理了一个简单的示例，其中包含棕榈树和星星的图片。如果你愿意，你可以用视频来做到这一点。

img {
  -webkit-mask-image: url(https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png);
  mask-image: url(https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

<body>
  <img src="http://polyadhawaiitours.com/blog/wp-content/uploads/2014/03/PalmTree1.jpg">
</body>

【讨论】：