在CSS中,我們既可以使用背景圖片來裝飾元素,也可以在元素中直接插入一張圖片。如果需要在圖片上再增加另一張圖片,我們也可以通過一些簡單的CSS技巧來實現這一效果。
.container{
width: 500px;
height: 500px;
background: url(bg-img.jpg);
position: relative;
}
.img1{
position: absolute;
top: 50px;
left: 50px;
}
.img2{
position: absolute;
top: 100px;
left: 100px;
}
在上述代碼中,我們首先創建了一個容器元素,并將其背景設置為一張圖片。接著,我們通過設置元素的position屬性為relative,可以將容器變成一個相對定位的元素。
然后,我們在容器中插入兩張圖片,分別為img1和img2。為了能夠在圖片上再加上一張圖片,我們需要將img1和img2的position屬性設置為absolute,這樣它們就變成了絕對定位的元素,相對于它們的直接父元素進行定位。
最后,我們可以通過設置img2的top和left屬性,將它放置在img1的上面,并覆蓋img1的一部分內容。這樣,我們就成功地將一張圖片疊加在另一張圖片上了。
下一篇css圖片上浮文字