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

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

　　HTML

　　css

　　小伙伴們注意了，目前谷歌要想支持該函數(shù)需要添加前綴-webkit-才可以實(shí)現(xiàn)。

　　這個(gè)效果就是風(fēng)景圖以50%的透明度和人物圖以50%的透明度進(jìn)行了混合渲染 ,

　　是不是覺得這個(gè)方法比定位簡(jiǎn)單太多啦~~~

　　來(lái)看一下具體的實(shí)現(xiàn)方法：

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

　　· 下面的格式是將風(fēng)景圖這張圖以75%的透明度與人物圖這張圖25%的透明度進(jìn)行混合渲染

　　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));

　　· 如果未聲明任何百分比并且包含三個(gè)圖像，則每個(gè)圖像的不透明度為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強(qiáng)大了很多!

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