![c7b66d075801b38b699d095dc3c68ada.png](https://img-blog.csdnimg.cn/img_convert/c7b66d075801b38b699d095dc3c68ada.png)
前段时间有挺火的一个小游戏,拿两张图片叠加在一起,看看复合人物的效果,用css怎么实现呢?可能大部分人想到的是将两个img用定位的方式叠加在一起,分别设置透明度,当然这个办法是可行的,其实css还提供了一个cross-fade()方法,讲两张图片作为背景图引入,可以实现相同的效果。
![bb3ac00a8a42a3bcaf2703520f0cfae3.png](https://img-blog.csdnimg.cn/img_convert/bb3ac00a8a42a3bcaf2703520f0cfae3.png)
cross-fade()函数可以让两张图像半透明混合。 例如
HTML
css
.box {width: 600px;height: 450px;background-image: -webkit-cross-fade(url(girl.jpg), url(1.jpg), 50%);background-image: cross-fade(url(girl.jpg), url(1.jpg), 50%);}
小伙伴们注意了,目前谷歌要想支持该函数需要添加前缀-webkit-才可以实现,会出现下面的效果:
<