如何創建：鏤空文字

學習如何使用 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;
  ....
}

親自試一試