如何创建：镂空文字

学习如何使用 CSS 创建响应式镂空文字（也称为剪切文字或抠图文字）。

镂空文字是一种透明文字，看起来像是在背景图片上被剪切出来的效果：

WUHAN

亲自试一试

注意：此例不适用于 Internet Explorer 或 Edge。

如何创建镂空文字

第一步 - 添加 HTML：

<div class="image-container">
  <div class="text">NATURE</div>
</div>

第二步 - 添加 CSS：

使用 mix-blend-mode 属性可以将镂空文字添加到图像中。但 IE 或 Edge 不支持：

.image-container {
  background-image: url("img_nature.jpg"); /* 使用的图像 - 很重要！ */
  background-size: cover;
  position: relative; /* 需要将剪切文字定位在图片中间 */
  height: 300px; /* 一定的高度 */
}

.text {
  background-color: white;
  color: black;
  font-size: 10vw; /* 响应式字体大小 */
  font-weight: bold;
  margin: 0 auto; /* 居中文本容器 */
  padding: 10px;
  width: 50%;
  text-align: center; /* 居中文本 */
  position: absolute; /* 定位文本 */
  top: 50%; /* 将文本定位在中间 */
  left: 50%; /* 将文本定位在中间 */
  transform: translate(-50%, -50%); /* 将文本定位在中间 */
  mix-blend-mode: screen; /* 这使剪切文字成为可能 */
}

亲自试一试

如果您想要黑色容器文本，请将 mix-blend-mode 更改为 multiply，将背景颜色改为黑色，将颜色改为白色：

实例

.text {
  background-color: black;
  color: white;
  mix-blend-mode: multiply;
  ....
}

亲自试一试