如何 - 剪切文本

了解如何使用 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"); /* The image used - important! */
background-size: cover;
position: relative; /* Needed to position the cutout text in the middle of the image */
height: 300px; /* Some height */
}

.text {
background-color: white;
color: black;
font-size: 10vw; /* Responsive font size */
font-weight: bold;
margin: 0 auto; /* Center the text container */
padding: 10px;
width: 50%;
text-align: center; /* Center text */
position: absolute; /* Position text */
top: 50%; /* Position text in the middle */
left: 50%; /* Position text in the middle */
transform: translate(-50%, -50%); /* Position text in the middle */
mix-blend-mode: screen; /* This makes the cutout text possible */
}

亲自试一试 »

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

示例

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

亲自试一试 »