概念上两者非常容易混淆，但完成的效果是一样的，需记住哪个是无色抠取，哪个是黑色抠除。

再者还有个裁剪，只是做裁切，没有对半透明情况的处理。

这样一说就知道，本文阅读起来可能是会有点乱的。

那么前端方法中 如何实现 ，又各 有哪些应用场景 呢？

比较容易搜到的，也是用得最多的，强得一批。

现在是只有遮罩功能的， mask 指定的是下层形状，本元素及其所有子级为上层图案。

<small>以后的发展可能会通过 mask-composite 实现蒙版，小期待一下吧。</small>

遮罩嘛，即有色就显示，无色则隐藏。

rgba(0,0,0,0)、tranpsarent，png 图片中的透明 或 无色 就抠除。

mask 和 background 的设置非常类似，也可以缩写：

mask-image / mask-repeat / mask-position / mask-size / mask-origin / mask-clip

mask-image 也和 background-image 一样支持 url， gradient，image-set，element 等等。

举几个栗子：

至于剩下的 mask-mode / mask-type / mask-composite 浏览器支持还不太妙，暂可以不考虑。

但功能上却是强大，需要更多了解还请自行翻阅 文档 。

PS： 兼容性 方面虽然一片红，IE 什么的抛弃掉，实验下来其实还不错。写上 -webkit-mask 基本都能用。

PPS：firefox 中动画时 mask-size 小于 100% 会不显示，但定值可以，原因不知。

个人有点莫名的习惯，不管做什么效果，都会往 SVG 上想一想，可能源于它强大的功能吧。

相比 html+css 多了很多特性，如路径/线条的设置/诸多滤镜/视图限定等；

相比 canvas 多了一些 dom 上的便捷操作，如事件。

SVG 可以用 mask 来实现 蒙版 ，用 clipPath 来实现 裁剪 （下文会讲）。

区分一下，svg mask 为蒙版，白色为显示；css mask 为遮罩，有色为显示。

mask 蒙版内可以包裹透明图片或文字。

但使用蒙版的元素，却莫名不能是 image，这就很完蛋呀，有待研究。

如果 css 的 mask 适用于图片和渐变等的话，那 background-clip:text 就适用于文字。

字面意思，将背景裁切成文字范围。

另外，background-clip 还可以设 content-box，也是不错的功能，

默认 padding-box，border-box 有上边框不被修改的 BUG。

注： 兼容性 上，明文规定要加 -webkit-。顺便抛弃 IE。

很多文章误以为是 text-fill-color 实现了遮罩功能，其实是 background-clip:text 呀！

clip 在 canvas 中本来的作用是切一块画布独立出来。

拿来做遮罩效果也是可以的，但并非真的遮罩，只是裁剪，因为它不是按有色无色来判断显示的。

还可以用 beginPath, lineTo 等线条操作来形成图形。

注：fillRect 和 strokeRect 是无法被切出来的，要用 rect。

注：为了避免影响其他地方，用 save 和 restore 包起来就行了。

注：文字遮罩用 clip 是无法实现的。

修改 canvas 的渲染规则。比如后写的盖住前面的，改成后写的放到低层之类的。

这些规则中有一个 source-in，就能实现 遮罩 （按黑白色来判断显隐）。

如果你用的 strokeRect 和 fillText 那绘制出来的也是相应效果哟。

如果前者是半透明的，覆盖的后者渲染出来也会是半透明的。

如果前者是半透明的 PNG 图片，覆盖的后者出来的也会是半透明，强无敌。

注：globalCompositeOperation 的默认值是 source-over，用完了别忘了改回来，不然会影响后续操作。

全部规则效果一览： https://foreverz133.github.io/demos/single/globalCompositeOperation.html

其中有一些可以拿出来提一下，挺好玩的。

source-in：交叉的部分渲染后者

destination-in：交叉的部分渲染前者

destination-out：去掉交叉的部分

destination-over：后者放至下层

主要还是以裁剪为主，裁剪当然是不会根据形状的颜色什么的来判断显隐的咯。

css 的 clip-path 是老版属性 clip 的改良版，clip 必须绝对定位，且只有矩形还只能 px。

clip-path 则支持方形/圆形/椭圆形/多边形，单位也更丰富。

我觉得 clip-path 和 border-radius 一样，改个图片或者盒子的样式又方便又爽。

但也不一样，因为是裁剪，像 border 呀子级内容呀什么的也是会被剪掉的，hover 也还是原来的尺寸。

比如盖一层镂空的五角星显示背景色呀，盖一层镂空的字呀什么的

假 DEMO： https://foreverz133.github.io/demos/single/star.html

这应该就是名副其实的遮挡层了吧，与本文其实毫无关系。

但可能你会在你不了解 mask 或需要兼容时用到。

例子： http://www.zhangxinxu.com/wordpress/2016/03/better-black-mask-guide-overlay-method/

除此之外，radial-gradient 可以完成部分类似功能，比如圆形的镂空，位置和大小设置相较也更方便。

shape-outside 仅能算作是高级版 float 扩展，也与本文毫无关系。

只是因为既然写了 clip-path 那 shape-outside 就提一下，避免有理解错误。

注：shape-outside 得是浮动元素时才有效。

注：它能设的值和 clip-path 基本一致

它并不会改变本身什么东西，形状不会变，border 等也还是原来的样子，还得结合 clip-path 来用。

它只是让其他与其贴边的元素有了一个不一样的贴边效果。

PS： 兼容性 吧，怎么说呢，回退到方形影响应该不大。

虽然 clip-path 又不像 border-radius 可以加边框阴影什么的，但其实 polygon 多边形可以有高级玩法，

比如： https://codepen.io/airen/pen/VPKQxb

文档 显示以后会支持 url 和 element 等，那就很方便了呀。顺便再期待一下 shape-inside 的出现。

你思考一下 css 的 mask / background-clip / clip-path 和 shape-outside 的使用场景，这其实很有意思。

遮罩是有色的部分显示图案，蒙版是白色的部分显示图案，裁剪只是裁成这个形状，三者的实际妙用在本文中并没有深入书写，仅算是梳理其功能和明确其区别。

还请大佬们多多分享此方面的巧妙案例咯，让小弟也开开眼。

SVGs 能够很好的在 web 上工作, 剪切和遮罩允许你使用有趣的方式去展示或隐藏 web 图像， 使用这些技术也能让的设计变得更加灵活因为你不需要去修改或者创建新的图像——这些都可以用代码来实现。通过结合使用 CSS 和遮罩技术，你将会拥有更多的可能性去使用网络图像。

需要明确的是，遮罩和剪切是通过 CSS 来处理图像的两种不同的方法，让我们从剪切开始吧！

剪切基础

如果你曾经使用过 Photoshop , 你大概已经很熟悉剪切遮罩了。 他们有一些共同点，剪切通过放置矢量图形来使用,比如圆和三角形, 在图像和元素的上面矢量图形外面的任何部分都会显示，所有矢量图形边界的外面都将被隐藏。

举个例子，如果一个三角形的剪切遮罩覆盖上树林图像上的话, 你可以看到三角形里面的森林图像。图形的边界被称做剪切路径, 不要和已经废弃掉的 clip 属性混淆，你可以使用 clip-path 去创建一个剪切路径。

遮罩基础

在网页上，遮罩是使用 PNG 图片、CSS 渐变、或一个 SVG 元素来隐藏图片或其它元素的部分。我们将集中注意力在 SVG 图像上，不过请注意遮罩可以使用其他类型的图片或者样式的。

遮罩属性和遮罩元素

仅仅是为了帮助理解, 请记住被遮罩的元素是“原始”（还没有应用遮罩的）图片， 你可能不想看到全部的图片,所以使用 CSS mask 属性来完成隐藏部分图片的工作。 mask 是 CSS 一组独立属性的简写 , 我们将接下来会介绍它。SVG 元素被用来给 SVG 内部的图像添加遮罩效果。在接下来的示例中, 遮罩是添加了渐变效果的圆形。

在 SVG 图像上应用 SVG 遮罩元素

为了使用 SVG mask 得到一种感觉，我们将在 SVG 图像上使用遮罩。

这给人的第一印象可能会比较复杂, 但是它可以很好遮罩下面的图像。我们有一张真实的图片作为背景，那么 SVG 在哪里起作用呢？和剪切不同, 这张背景图片技术上来说是在 SVG 元素内部的。我们将使用 CSS 来给图片应用遮罩，属性将来自于 SVG 遮罩元素，在我们的 CSS 中指定一个 mask-element id。

1、滤镜：Alpha

语法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"

说明：

Opacity：起始值，取值为0～100, 0为透明，100为原图。

FinishOpacity：目标值。

Style：1或2或3

StartX：任意值

StartY：任意值

例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

2、滤镜：blur

语法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"

说明：

Add：一般为1，或0。

Direction：角度，0～315度，步长为45度。

Strength：效果增长的数值，一般5即可。

例子：filter:Blur(Add="1",Direction="45",Strength="5")

3、滤镜：Chroma

语法：STYLE="filter:Chroma(Color = color)"

说明：color：#rrggbb格式，任意。

例子：filter:Chroma(Color="#FFFFFF")

4、滤镜：DropShadow

语法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"

说明：Color:#rrggbb格式，任意。

Offx：X轴偏离值。

Offy：Y轴偏离值。

Positive：1或0。

例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

5、滤镜：FlipH

语法：STYLE="filter:FlipH"

例子：filter:FlipH

6、滤镜：FlipV

语法：STYLE="filter:FlipV"

例子：filter:FlipV

7、滤镜：glow

语法：STYLE="filter:Glow(Color=color, Strength=strength)"

说明：

Color：发光颜色。

Strength：强度(0－100)

例子：filter:Glow(Color="#6699CC",Strength="5")

8、滤镜：gray

语法：STYLE="filter:Gray"

例子：filter:Gray

9、滤镜：invert

语法：STYLE="filter:Invert"

例子：filter:Invert

10、滤镜：mask

语法：STYLE="filter:Mask(Color=color)"

例子：filter:Mask (Color="#FFFFE0")

11、滤镜：shadow

语法：filter:Shadow(Color=color, Direction=direction)

说明：

Color：#rrggbb格式。

Direction：角度，0－315度，步长为45度。

例子：filter:Shadow (Color="#6699CC", Direction="135")

12、滤镜：wave

语法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength)

说明：

Add：一般为1，或0。

Freq：变形值。

LightStrength：变形百分比。

Phase：角度变形百分比。

Strength：变形强度。

例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

13、滤镜：Xray

语法：STYLE="filter:Xray"

例子：filter:Xray

---