文字镂空效果原图：效果图：先做一个蒙版添加标题，设置标题样式最后我们设置文字描边，设置背景区域为文字内容，设置文

原图：效果图：

先做一个蒙版

<body>
    <div class="modal"></div>
</body>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        /*设置变量*/
        --bg:url("images/tokyo.jpg") no-repeat center/cover;
        background: var(--bg);
        height: 100vh;
        font-family: 'Open Sans',sans-serif;
    }
    .modal{
        background: rgba(0,0,0,0.7);
        width: 100%;
        height: 100%;
    }
</style>

微信截图_20231127051847.png

添加标题，设置标题样式

<body>
    <div class="modal">
        <h1>TOKYO</h1>
    </div>
</body>

.modal h1{
    width: 100%;
    height: 100%;
    /*流式布局*/
    display: flex;
    /*水平居中*/
    justify-content: center;
    /*垂直居中*/
    align-items: center;
    font-size: 12vw;
}

最后我们设置文字描边，设置背景区域为文字内容，设置文字颜色为透明，这样文字镂空效果就有了

.modal h1{
    width: 100%;
    height: 100%;
    /*流式布局*/
    display: flex;
    /*水平居中*/
    justify-content: center;
    /*垂直居中*/
    align-items: center;
    font-size: 12vw;
    /*文字描边*/
    -webkit-text-stroke: 5px #fff;
    background: var(--bg);
    /*设置背景区域为文字内容*/
    -webkit-background-clip: text;
    /*设置文字颜色为透明*/
    color: transparent;
}