怎么用纯CSS实现镂空效果

小编给大家分享一下怎么用纯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 最大的时候，那个区域就完全不透明了。举个例子：

ABCDEFG