小编给大家分享一下怎么用纯CSS实现镂空效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
创新互联建站网站建设公司一直秉承“诚信做人，踏实做事”的原则，不欺瞒客户，是我们最起码的底线！ 以服务为基础，以质量求生存，以技术求发展，成交一个客户多一个朋友！专注中小微企业官网定制，网站设计、成都做网站，塑造企业网络形象打造互联网企业效应。
background-clip: text
背景被裁剪为文字的前景色。第一次是在 CSS-Tricks 看到的这个用法: 在 CSS-Tricks 网站上，这个玩意用得到处都是。
这样，做简单的图片背景镂空效果便不再困难了。关键代码只有几行。
.wrapper {
/* ... */
background-image: url("/path/to/your/image");
background-clip: text; /* ! */
color: transparent; /* ! */
}就这几行，视觉上会就会有大变化。前后对比：
另外，这里有个比上面更实用的Demo
background-clip 既然是“background”家族的，那它天生和图片、渐变打的交道多。不过，我们做镂空总不会都是图片、渐变这种吧。如果我们想做视频、文字，甚至更复杂的 DOM 元素的镂空效果呢？
单刀直入： CSS mask 属性
这应该是最直接能想到的方法了。毕竟名字里就带个“mask”，谁能忽略呢？
CSS mask-* 系列属性是在 CSS Masking Module Level 1 中定义的。这个规范也定义了为很多人熟知的 clip 和 clip-path 属性，换句话说，这个CSS 模块包括遮罩和剪裁两部分。
第一个例子
虽然是一个新的属性，但设置 mask 属性并不难。下面就是我们的第一个例子。
.masked {
height: 100px;
width: 100px;
background: linear-gradient(red, orange, yellow, lightgreen, blue, purple, red);
mask: url("https://github.githubassets.com/pinned-octocat.svg");
}就是下面的效果啦。
上面的用法还是很简单的，我们指定了一个 mask 参数，它的值是一张 从GitHub盗的SVG图片。于是多彩的渐变就被 裁剪遮罩成了那只著名的猫。
mask-* 大家族
mask 属性实际上是诸多 mask-* 的缩写:
mask-image mask-repeat mask-position mask-clip mask-origin mask-size - mask-type mask-composite mask-mode
有没有 background-* 的即视感？没错，里面的不少属性都是和 backgorund / border 一致的，而且它们的作用也是一致的，只不过 background-* 用在背景上，而 mask-* 用在遮罩层上而已——用在背景上的奇技淫巧搬到 mask 的世界里还能接着用！比如实现这样的效果：
.masked {
height: /* ... */;
width: /* ... */;
background: /* ... */;
mask-image: url(https://github.githubassets.com/pinned-octocat.svg);
mask-size: 5em;
mask-position: center;
/* 如果你心情好，加个动画也没问题的 */
}进一步控制遮罩效果
可能读者已经发现了， mask-* 家族里有几张生面孔。这也好理解： mask 这么强大的特性，完完全全地抄 background-* 岂不可惜了。
mask-mode
mask-mode 用来指定具体的遮罩方式。
mask-type CSS 属性设置 mask-image 被用于“亮度型”的遮罩还是“不透明度”型的遮罩。 mask-mode: alaph 表示使用不透明度（即alaph通道）作为 mask value， mask-mode: luminance 表示使用亮度值作为 mask value。
那，遮罩值 / mask value 又是什么？mask value 表示被遮罩的元素被遮罩的程度。mask value 越大，被遮罩区域会更偏向于显露，mask value 最大的时候，那个区域就完全不透明了。举个例子：
