如何做 - 镂空文本
学习如何使用 CSS 创建响应式镂空/挖空文本。
镂空文本（或挖空文本）是一种透明文本，它看起来像是在背景图像上被剪切出来的。
自然
注意：此示例在 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 更改为白色
