CSS实现文字镂空效果炫酷背景效果

天渺工作室

已于 2023-04-09 01:57:49 修改

阅读量975

点赞数 1

分类专栏： Html5+Css3 文章标签： css镂空文字 css文字背景 css3 mix-blend-mode

于 2023-04-09 01:56:08 首次发布

本文链接：https://blog.youkuaiyun.com/sinat_37255207/article/details/130037577

版权

Html5+Css3 专栏收录该内容

5 篇文章

订阅专栏

通过CSS3的mix-blend-mode属性，特别是screen混合模式，可以创建文字镂空效果，将文字置于动态背景如视频或图片之上，产生炫酷的视觉体验。在示例代码中，一个静态或动态背景被设置在文字层下方，然后应用mix-blend-mode:screen，使得文字部分呈现出背景内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS实现文字镂空效果炫酷背景效果

css3中的mix-blend-mode

css3中有一个mix-blend-mode的screen混合模式，可以轻松实现镂空文字效果。背景我们可以固定定位设置一个静态图片，gif动态图，视频video，svg动画等等。

代码案例

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    .test-title {
        width: 100vw;
        height: 100vh;
        background: #ffffff; /*关键加了背景色才能混合*/
        text-align: center;
        font-size: 100px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 800;
        position: absolute;
        margin: auto;
        top: 0;
        z-index: 1;
        padding-top: 20%;
        mix-blend-mode: screen; /*关键 screen混合模式*/
    }
</style>
<body>
	<!--video视频做动态炫酷背景-->
    <video style="width: 100%;" src="./testvideo.mp4" loop autoplay muted="muted">
    </video>
    <div class="test-title">
        Hello World
        Hello World
        Hello World
    </div>
</body>
</html>