css实现镂空效果(蒙版)

CSS Mask 属性

和 Sketch 里面的 Mask 一样,CSS Mask 可以让蒙版区域区域透过去,不透明区域保留显示出来。
用法和 background 基本一致,学习零成本。比如 mask-image, mask-origin, mask-position, mask-repeat, mask-size 都和 background 一致。因为过于简单,不在这里啰嗦,更多用法还是看文档 或者 张鑫旭-CSS遮罩CSS3 mask/masks详细介绍

核心代码只有一行,

1
2
3
4
5

img {
mask-image: url(https://user-gold-cdn.xitu.io/2018/10/18/1668599f2b92301d?w=500&h=295&f=gif&s=296531);
}

兼容性