背景

入职阅文以后，第一次做项目的时候用到了 mask，后来用到的频率越来越高，就发现这个真的是一个好东西，记录一下

背景颜色变化影响图片

之前写的一篇文章和一个demo range 实现评分组件，里面就是用 mask 实现的，把图片盖在背景之上（效果是只显示背景只显示图片区域内，而图片会变成透明的）就实现了背景颜色变化，图片的颜色也跟着变化

例如 mask 实现图片随背景变化而变化

mask 实现文字渐变

使用 mask 实现视频弹幕人物遮罩过滤

补充： 换肤或者系统模式切换的时候，有些图标跟着变化而变化，我们就可以利用在一个元素上面同时写mask-image和background实现 ，具体的后续添加链接在看

边缘镂空半圆的CSS效果

张老师的小测里面出了一个场景题目

实现边缘镂空的效果，我第一时间想到了，或许mask可以，但是实现看了半天，最终实现不了放弃了。通过后台看XboxYan 同事的代码，发现一个很棒很棒的实现。我研究讨论了一段时间才弄懂了。

我 copy 同事的代码出来mask 边缘镂空半圆的CSS效果

我看的不是很明白就在问他

我：为啥mask-position:负数，就会被劈成两个？两边显示

他：你改成0看看

我：零就是一个圆，为负的时候就开始劈开了，负的越多，就开始劈的厉害

他：这个和背景一样，是平铺的

我：还是不懂，为啥会劈开两端，中间没有平铺

他：因为背景有这么大，然后那个洞本来就在最左边

我还是不懂，于是我就去试了试，他说的背景图

试了试成功了，开心，我以为我懂了，就去和他说我懂了背景镂空

我：但是我不清楚，位置变负以后的表现，从来没有用过。觉得很奇怪，查看文档也没有说，会劈在两边显示呀

继续尝试，把background-image换成图片之后，失败了，我懵逼了。到底咋回事，他说的平铺是啥呢？

我：我把我的不懂继续问他，换了一种问法，为啥图片不行，radial-gradient(circle at 10px center, red 10px, transparent 0)就可以了

他：这个绘制出来的就是一整张图，只有左边有一个红色的圆

我：突然明白了，所以利用的是她的平铺特性，其实是有一张多的图片，并不只是一张图片。真的太厉害了

他：试一试圆分成四份，放在四个角落？

有一次get到很强的写法，我总是那么菜，还笨

细细品读了两篇文章，才真正意义上的理解了 mask 用我粗糙的理解就是遮罩，就像用ps把两张图片叠在一起一样，底图就是一张正常的图，上面的图片，是部分透明，部分不透明。透明部分就穿过可以看到底图，从而就实现了两张图片遮罩的效果

我：想了很久尝试了很多没有想出来，他说的那个，用一个很low的

他：看了我的low方案之后，给我一个很不错的方案

我：大神就是大神

圆分成四份，放在四个角落

我：不懂为啥只在后面只加了一句话

他：省略就给一个默认值50%，图片刚好是容器大小，所以本身就是居中的；

我：无论负多少，都没有变化，继续问

他：(容器尺寸 - 图片尺寸) * xx%，图片刚好是容器大小，所以永远都是0，没有效果。两个方向上的，一般省略都不是相同的

真好，能和张老师和XboxYan一起办公很爽呀，发现很多很有意思的css，茅塞顿开，学习到了很多，感谢

参考文档

客栈说书：CSS遮罩CSS3 mask/masks详细介绍

CSS遮罩——如何在CSS中使用遮罩

mask-composite 借鉴了Canvas中的globalCompositeOperation属性值，各个属性值详细作用可以

10个demo示例学会CSS3 radial-gradient径向渐变: 文章里面提到了radial-gradient径向渐变 这个属性我不太熟，看了一遍懂了，以后不懂可以多看看。（at 后面是起始位置，关键字前面是半径，关键字是形状，之后就是颜色的变化了，radial-gradient(20px 15px ellipse at top, red 10px, transparent 11px)，ellipse => 椭圆， 20px =>横轴半径，10px => 表示纵轴半径 表示绘制一个长度100px高度200px的椭圆. top 从上面开始，red 10px, transparent 11px颜色变化；对于径向渐变，在不指定渐变类型以及位置的情况下，其渐变距离和位置是由容器的尺寸决定的。指定位置或类型会发现既不是按照宽度来的，也不是按照高度来的，是按照最远边角距离作为渐变结束线的（对角线的位置：

mask 的很多属性都和background一样的，所以两边有的属性就当全部是公用的就好了