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

更新于 2月14日  约 3 分钟

1.图片遮罩

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

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

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

mask.jpg

代码:

background-image: url(https://s2.ax1x.com/2020/02/13/1LF8iD.jpg);
-webkit-mask: url(https://s2.ax1x.com/2020/02/14/1XE6lF.png);
mask: url(https://s2.ax1x.com/2020/02/14/1XE6lF.png);

线上效果:https://codepen.io/jianxiujiu...

mask的属性值如下:

说明
url(_'URL'_) 图像的URL
none 默认值,无图像背景会显示。
渐变 包括线性渐变、径向渐变、圆锥渐变

2.渐变遮罩

mask2.jpg

-webkit-mask: linear-gradient(#000, transparent);
mask: linear-gradient(#000, transparent);

对渐变不了解的同学可以看看:
https://segmentfault.com/a/11...

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

大家做需求的时候有没有遇到过,设计师给的图标图片经常要换色,同一个图标在不同的场景下显示不同的颜色。
图标可以使用SVG来完成,也可以使用图片来制作。
图片要达到多种颜色又只使用一套图,我们可以用遮罩来实现。

mask3.png

线上效果:https://codepen.io/jianxiujiu...

阅读 303更新于 2月14日

推荐阅读
目录