页面镂空文字？使用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加上一个背景图，如下