神奇的CSS，页面镂空文字（渐变文字升级）

实现镂空文字的原理就是两个重合的div，底层的div上正在使用视频、GIF、图片皆可，顶层的div上面输出想要镂空的文字，然后通过-webkit-background-clip: text;进行文字的裁切镂空，color为transparent透明即可实现效果。

底层为一张背景图，亦可以放GIF或者视频*
语法 background-clip: border-box|padding-box|content-box;
值 描述
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
CSS代码实现（一）：

*{
margin: 0;
padding: 0;
font-family: ‘微软雅黑’, cursive;
}

.div_loukong1 {
height: 100%;
width: 100%;
font-size: 350px;
font-weight: 900;
text-align: center;
background-image: url("…/img/****.gif");
background-size: 200% 100%;
/裁减掉文字以外的背景/
-webkit-background-clip: text;
/设置文字填充色为透明/
color: transparent;
}
CSS代码实现（二）：

.div_loukong2 {
margin: auto;
width: 60%;
height: 800px;
line-height: 100px;
text-align: center;
font-size: 50px;
font-weight: bold;
color: transparent;
background: url(‘https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=453201562,784291000&fm=26&gp=0.jpg’) no-repeat center center;
background-size: cover;
-webkit-background-clip: text;
}

本文地址：https://blog.csdn.net/koriweb/article/details/109266393