如何 - 镂空文本
了解如何使用 CSS 创建响应式镂空文本/剔除文本。
镂空文本（或剔除文本）是一种透明文本，它看起来像是在背景图像上剪切出来。
自然
注意：此示例在 Internet Explorer 或 Edge 中不起作用。
如何创建镂空文本
步骤 1）添加 HTML
示例
<div class="image-container">
<div class="text">自然</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"，背景颜色更改为黑色，文本颜色更改为白色
