最近看Steve Sewell的推时学到的一招css trick，举个例子：
效果
实现
<div class="container">
<img src="https://thumbs.gfycat.com/AgonizingDecisiveBullmastiff-size_restricted.gif"/>
<div class="text">mix-blend-mod</div>
</div>
<style>
.container {
height: 7em;
overflow: hidden;
position: relative;
}
.container img {
width: 100%;
object-fit: cover;
}
.container .text {
position: absolute;
background-color: white;
mix-blend-mode: lighten;
inset: 0;
font-size: 5em;
font-weight: 900;
}
</style>
关键在于使用mix-blend-mod这个属性，它定义了两个不同的层（layer）如何blend在一起，在上面的例子中我们有一张海洋的gif图作为底层背景层，另外，在背景层之上，还有一个白色背景的深色字体层，然后我们使用mix-blend-mod: lighten;, lighten定义了浏览器将渲染两层之中更亮的像素，最终效果就是，在第一层字体层中白色的像素会被保留，而深色字体的像素将会被第二层背景层的像素所替代。
另外背景层除了gif之外也可以是video，你还可以使用javascript setInterval之类的方法实现字体的count up之类效果来使整体效果更加酷炫。
