Question

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

http://www.rumchata.com/

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

Answer 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>

如何使用PNG屏蔽图像的边缘？

1 个答案: