CSS3有一項非常強大的功能就是圖片層疊。這個功能可以讓我們把多張圖片放在一起,形成一個更加炫酷的效果。下面我們來看看如何使用CSS3實現這個功能:
img { position:absolute; top:0; left:0; } img:nth-child(1) { z-index:1; } img:nth-child(2) { z-index:2; } img:nth-child(3) { z-index:3; }
首先,我們需要給每張圖片設置它們的位置,這里我們使用了position:absolute和top、left屬性來控制圖片的位置。
然后,我們通過nth-child偽類來為每張圖片設置z-index屬性,這個屬性可以控制圖片在層次中的位置,數值越大表示圖片越在上面。
我們可以根據需要同時使用多張圖片來實現更加豐富的效果,只需要按照以上方法為每張圖片設置好位置和z-index屬性即可。
最后,需要注意的是,在使用圖片層疊的時候,一定要有一個容器來包裹這些圖片,并且這個容器的position屬性應該設置為relative或者absolute,否則這些圖片將會位于整個頁面的左上角。
下一篇java對象分配和回收