CSS中我們可以通過background-image屬性來為元素添加圖片背景,但是如果想在圖片上再放置圖片的話該怎么辦呢?下面我們來講解如何通過CSS在圖片上放置圖片。
.parent{ position: relative; } .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
首先我們需要為包含原始圖片的元素添加一個position:relative屬性,這樣在接下來的步驟中我們才能通過子元素設置絕對定位來進行圖片疊放。
接下來,我們需要給子元素添加絕對定位,并設置top、left和transform屬性讓子元素垂直水平居中。其中transform屬性的使用是為了讓子元素左上角與包含元素的中心重疊,這樣才能保證子元素在不同大小的圖片上都能準確居中。
最后,我們在子元素中添加background-image屬性來設置要放置的圖片,這樣就能在原始圖片上高大上的展示另一張圖片了。