浅谈CSS 图片遮罩 mask/-webkit-mask

2020-02-13

1.遮罩

我们先来认识何为遮罩。
上一段百度的解释:

遮罩层必须至少有两个图层,上面的一个图层为“遮罩层”,下面的称“被遮罩层”;这两个图层中只有相重叠的地方才会被显示。

解释挺长,其实用图片来看就十分直观了:

mask.jpg

代码:

-webkit-mask: url(img/1.png) no-repeat);
mask: url(img/1.png) no-repeat);

2.遮罩为渐变

3.利用遮罩实现换色效果

未完待续...

原文链接:segmentfault.com

上一篇:宝宝也能看懂的 leetcode 周赛 - 173 - 4
下一篇:react-native之redux状态管理
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部