认识CSS mask-composite
CSSmask-composite实在是太棒了！简而言之，只需要一张图，你就能搞定各种色彩变幻的特效。就像我们在网页设计时，经常需要反复抠图，现在有了它，真的省事儿太多了！
2.只要简单点几下鼠标，就可以处理PNG或者SVG格式的图片，将原来的灰色背景变为透明的，然后就可以轻松打造出理想中的模糊效果。
探索mask-composite属性
想知道怎么玩mask-composite吗？首先，咱们得了解什么是mask。简单来说就是用它来给图片加特效，再配合mask-composite，就可以做出各种好看的图层遮罩！这下明白了吧-webkit-mask-composite的意思其实就是让不同遮罩图混搭，效果棒棒哒！这样一来，不管有多少个mask都不用怕，只要搞堆叠效果，瞬间让你的作品逼格满满
应用radial-gradient进行切割
用Mask切割图片很好玩！像用Radial-Gradient做个Mask就能随心所欲改变方块的样子变成长方形或是奇形怪状的图形。你还能试试把多个Mask拼在一起，打造自己想要的效果。就算不小心搞砸了也没事儿，只要用mask-composite搞定就好。
.original {
background: #000;
mask: radial-gradient(circle at 0 0, #000, #000 200px, transparent 200px);
}
实现反向镂空效果
想要两张MASK图叠加起来然后看不见的地方露出来？只要加上-webkit-mask-composite: source-in就能搞定~这么做不仅节省了图片资源，还可以轻松换掉原本图片的颜色。不妨试试这个小秘诀，你可以用一个PNG或SVG图做出反向镂空效果，随意改变颜色，甚至是渐变色！
优化与局限性
.original {
background: #000;
mask: radial-gradient(circle at 100% 0, #000, #000 200px, transparent 200px);
}
新的技术比以前的只能黑白转彩色的强多了，不管什么颜色的图片，都会变来变去。不过得留意一下，目前尚不能完全消除与 mask-composite 和-webkit-mask-composite 的兼容问题，用的时候可要小心点儿。
总结与展望
学了这个技巧以后，搞CSS里的划片拼接、颜色转码和镂空就容易多！虽然刚开始可能有些困难，得适应各种各样的代码风格，但只要我们加油，总会有进步的。而且浏览器也是不断在升级，这些小问题肯定都能搞定的。想象一下，未来大家用这个技巧会越来越多吧～
.mask {
background: #000;
mask: radial-gradient(circle at 100% 0, #000, #000 200px, transparent 200px),
radial-gradient(circle at 0 0, #000, #000 200px, transparent 200px);
}
来这里给你介绍一款超实用简单的CSS切片秘籍——mask-composite，肯定能帮到大忙
。
评论0