剪切文本

---

了解如何使用 CSS 创建响应式剪切/剔除文本。

---

剪切文本（或剔除文本）是在背景图像顶部被剪切的透明文本:

NATURE 亲自试一试 »

注释: 此示例在 Internet Explorer 或 Edge 中不起作用。

---

如何创建剪切文本

步骤 1) 添加 HTML:

实例

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

---

---

步骤 2) 添加 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”，将 background-color 更改为黑色，并将 color 更改为白色:

实例

.text {
  background-color: black;
  color: white;
  mix-blend-mode: multiply;
  ....
}
亲自试一试 »