页面镂空文字？使用c3的-webkit-background-clip属性进行文字透明显示后面内容！

今天小编在浏览网页时发现这样的一个效果，效果很炫酷，研究了下发现代码…真简单！

原理就是两个重合的div，后面一个div上正在播放一段视频，前面的div上面写上我们想要镂空的文字，然后通过-webkit-background-clip: text;进行文字的裁切镂空，color为transparent透明就可以了

        <div class="text">未来夫人</div>

* {margin: 0;padding: 0;font-family: '黑体', cursive;}.text {height: 100%;width: 100%;font-size: 350px;font-weight: 900;text-align: center;background-image: url("../img/timgdw.gif");background-size: 200% 100%;/*关键就这两句*/-webkit-background-clip: text;color: transparent;}

效果：

嗯，没错，就是这么的简单，后面可以放视频可以放gif图等等，而且还可以在外面加上背景图，main盒子时外面的哦，text盒子时里面的
可以给main加上一个背景图，如下