前段時間有挺火的一個小遊戲，拿兩張圖片疊加在一起，看看複合人物的效果，用css怎麼實現呢？可能大部分人想到的是將兩個img用定位的方式疊加在一起，分別設置透明度，當然這個辦法是可行的，其實css還提供了一個cross-fade()方法，講兩張圖片作為背景圖引入，可以實現相同的效果。
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-才可以實現，會出現下面的效果：
這個效果就是1.jpg這張圖以50%的透明度和girl.jpg以50%的透明度進行了混合渲染 ,
是不是覺得這個方法比定位簡單太多啦~~~
來看一下具體的實現方法：
cross-fade()函數獲取圖像列表，並以百分比的形式定義當每個圖像與其他圖像混合時保留的不透明度。百分比值必須編碼為不帶引號，並且必須包含「％」符號，並且其值必須在0％和100％之間 。將百分比視為每個圖像的不透明度值，這意味著值為0％表示圖像完全透明，而值為100％則使圖像完全不透明。
下面的格式是將1.png這張圖以75%的透明度與2.png這張圖25%的透明度進行混合渲染
cross-fade( url(1.png) 75%, url(2.png) 25%);
上面的形式也可以寫成
cross-fade( url(1.png) 75%, url(2.png));
如果未聲明任何百分比，則兩張圖像都將是50％不透明的，並且淡入淡出渲染是兩張圖像的均勻合併。 以下是相同的效果。
cross-fade( url(1.png) 50%, url(2.png) 50%);
cross-fade( url(1.png) , url(2.png));
如果未聲明任何百分比並且包含三個圖像，則每個圖像的不透明度為33.33％。以下是相同的效果。
cross-fade( url(1.png), url(2.png), url(3.png));
cross-fade( url(1.png) 33.33%, url(2.png) 33.33%, url(3.png) 33.33%);
是不是感覺css強大了很多！