前段時間有挺火的一個小游戲，拿兩張圖片疊加在一起，看看復合人物的效果，用css怎么實現呢?可能大部分人想到的是將兩個img用定位的方式疊加在一起，分別設置透明度，當然這個辦法是可行的，其實css還提供了一個cross-fade()方法，講兩張圖片作為背景圖引入，可以實現相同的效果。

　　cross-fade()函數可以讓兩張圖像半透明混合。 例如

　　HTML

　　css

　　小伙伴們注意了，目前谷歌要想支持該函數需要添加前綴-webkit-才可以實現。

　　這個效果就是風景圖以50%的透明度和人物圖以50%的透明度進行了混合渲染 ,

　　是不是覺得這個方法比定位簡單太多啦~~~

　　來看一下具體的實現方法：

　　cross-fade()函數獲取圖像列表，并以百分比的形式定義當每個圖像與其他圖像混合時保留的不透明度。百分比值必須編碼為不帶引號，并且必須包含“%”符號，并且其值必須在0%和100%之間 。將百分比視為每個圖像的不透明度值，這意味著值為0%表示圖像完全透明，而值為100%則使圖像完全不透明。

　　· 下面的格式是將風景圖這張圖以75%的透明度與人物圖這張圖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強大了很多!

　　更多關于html5培訓的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。