在CSS中,我們可以使用***定位(absolute positioning)或者相對定位(relative positioning)來實(shí)現(xiàn)兩個圖片的位置重疊。
我們需要給兩個圖片分別設(shè)置定位屬性,假設(shè)我們有兩個圖片,分別叫做image1和image2,我們可以這樣寫CSS代碼:
#image1 { position: absolute; top: 0; left: 0; } #image2 { position: absolute; top: 0; left: 0; }
或者,我們也可以使用相對定位:
#image1 { position: relative; } #image2 { position: relative; }
我們可以給第二個圖片設(shè)置一個負(fù)的margin或者padding,讓它移動到***個圖片的上面或者左邊:
#image2 { margin-top: -50px; margin-left: -50px; }
或者,我們也可以給***個圖片設(shè)置一個正的margin或者padding,讓它移動到第二個圖片的下面或者右邊:
#image1 { margin-top: 50px; margin-left: 50px; }
這樣,兩個圖片就會位置重疊了,注意,這種方法只適用于圖片大小相同或者相似的情況,如果圖片大小不同,可能需要調(diào)整其他樣式來實(shí)現(xiàn)位置重疊。