如何创建 - 剪切文本
了解如何使用 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 更改为白色:
