CSS中可以使用相對定位或***定位將圖片放置在背景圖片上。
相對定位是指將圖片相對于其***近的父元素進行定位,如果沒有父元素,則相對于初始包含塊進行定位,使用相對定位時,可以使用position: relative;
將圖片設(shè)置為相對定位,然后通過top
、right
、bottom
、left
屬性進行微調(diào)。
***定位是指將圖片相對于整個頁面進行定位,不受任何父元素的影響,使用***定位時,可以使用position: absolute;
將圖片設(shè)置為***定位,然后通過top
、right
、bottom
、left
屬性進行定位。
在背景圖片上貼圖時,可以先將背景圖片設(shè)置為某個元素的背景,然后將需要貼圖的圖片作為該元素的子元素進行定位。
可以將背景圖片設(shè)置為body
元素的背景,然后將需要貼圖的圖片作為body
元素的子元素進行定位:
body { background-image: url('background.jpg'); } img { position: relative; top: 50px; left: 50px; }
或者,可以將需要貼圖的圖片作為某個***定位的元素的子元素進行定位:
div { position: absolute; top: 50px; left: 50px; background-image: url('background.jpg'); } img { position: relative; top: 50px; left: 50px; }