如何做 - 鏤空文字
學習如何使用 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 更改為白色
