css 写一个遮罩图片的效果

CSS中，我们可以使用mask-image属性来实现遮罩图片的效果，以下是一个简单的示例：

.mask {
  width: 200px;
  height: 200px;
  background-image: url('background-image.jpg');
  mask-image: url('mask-image.png');
  -webkit-mask-image: url('mask-image.png'); /* Safari兼容 */
}

上面的代码中，我们首先创建了一个宽高为200px的容器，并设置了背景图片为background-image.jpg。然后，使用mask-image属性来设置遮罩图片为mask-image.png。

需要注意的是，目前mask-image属性并不受所有浏览器支持，为了兼容不同的浏览器，我们需要使用-webkit-mask-image属性来对Safari进行兼容处理。

通过上述的代码，我们就可以轻松地实现一个遮罩图片的效果了。当然，我们也可以通过调整遮罩图片的大小、位置、透明度等设置，来实现更加美观的遮罩效果。