CSS中可以使用相對定位或***定位的方法在圖片上添加圖片。
相對定位是指將添加的圖片相對于當(dāng)前圖片進(jìn)行定位,可以通過設(shè)置position: relative;
來啟用相對定位,然后通過top
、right
、bottom
、left
屬性來調(diào)整添加圖片的位置,以下代碼將在當(dāng)前圖片上添加一張位于右上角的圖片:
.container { position: relative; } .container img { position: absolute; top: 0; right: 0; }
***定位是指將添加的圖片相對于整個(gè)頁面進(jìn)行定位,可以通過設(shè)置position: absolute;
來啟用***定位,然后通過top
、right
、bottom
、left
屬性來調(diào)整添加圖片的位置,以下代碼將在頁面上添加一張位于右上角的圖片:
.container { position: absolute; top: 0; right: 0; }
需要注意的是,使用***定位時(shí),添加的圖片會覆蓋在當(dāng)前圖片上,如果需要讓添加的圖片顯示在底部或側(cè)邊,可以通過調(diào)整z-index
屬性來控制層疊順序,以下代碼將在頁面上添加一張位于底部的圖片:
.container { position: absolute; bottom: 0; left: 0; z-index: 1; }
還可以通過CSS的偽元素來實(shí)現(xiàn)圖片上的添加效果,以下代碼將在當(dāng)前圖片上添加一張位于右上角的偽元素圖片:
.container::after { content: url('path/to/image.png'); position: absolute; top: 0; right: 0; }
是CSS中在圖片上添加圖片的幾種方法,可以根據(jù)具體需求選擇適合的方式。