在Web開發中,有時候需要在圖片上面蓋上一張另外的圖片或者其他元素,這可以通過CSS實現。
.container { position: relative; } .img-1 { position: absolute; z-index: 1; top: 0; left: 0; } .img-2 { position: absolute; z-index: 2; top: 0; left: 0; }
首先,需要把外層容器的position屬性設置為relative,這樣才能在該容器中使用absolute定位。然后,將需要覆蓋的圖片的position屬性設置為absolute,再把z-index屬性設置得比被覆蓋的圖片高,使其在上方。top和left屬性可以根據需要進行微調。
下面是一個簡單的示例:
<div class="container"> <img src="img-1.jpg" alt="img-1" class="img-1"> <img src="img-2.jpg" alt="img-2" class="img-2"> </div>
以上代碼中,img-2會覆蓋img-1。如果需要在圖片上蓋上其他元素,操作與圖片相同,將需要被覆蓋的元素position屬性設為absolute,z-index屬性設為比被覆蓋元素高的值,并通過top和left微調位置,即可實現在圖片上蓋上其他元素的效果。
上一篇css 圖片等比列
下一篇css 圖片移入 放大