用纯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 属性并不难。下面就是我们的第一个例子。

<div class="masked" />

.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-*								 
 1/4    1 2 3 4 下一页 尾页