文字镂空效果

结构如下, 实际也可简略为两层div

html

<div class="hollow">
    <div class="hollow_modal">
        <div class="hollow_text">文字镂空效果</div>
    </div>
</div>

在hollow样式上设置背景图, 这里定义一个--hollow_bg变量方便后续使用

css

.hollow {
    --hollow_bg: url(./images/stroke.jpg) no-repeat center/cover;
    background: var(--hollow_bg);
}

在hollow_modal样式上设置阴影图层

css

.hollow_modal {
    background: rgba(0, 0, 0, 0.7);

    /* 文字居中...(略) */
}

字体设置白边效果, 可以使用box-shadow(比较复杂), 也可以使用text-stroke(需要html5支持)

css

.hollow_text {
    text-stroke: 1px white;
    -webkit-text-stroke: 1px white;
}

继续设置文本效果, 原理同文字渐变色效果

css

.hollow_text {
    /* ....(略) */

    font-size: 5rem;
    letter-spacing: 0.2rem;
    color: transparent;
    background: var(--hollow_bg);
    -webkit-background-clip: text;
    background-clip: text;

    /* 文字不可选中 */
    user-select: none;
    -webkit-user-select: none;
}

文字镂空效果 ​

文字镂空效果