在CSS中,我們可以利用background-image屬性來疊加兩張圖片。
.image { background-image: url('img1.jpg'), url('img2.jpg'); background-size: cover; background-position: center; background-blend-mode: multiply; }
上面的代碼中,我們給一個class為“image”的元素設置了兩張背景圖片,分別是“img1.jpg”和“img2.jpg”。
接著,我們使用了background-size屬性來讓背景圖片盡可能地覆蓋整個元素,而background-position屬性則將圖片居中顯示。
最后,我們使用了background-blend-mode屬性來將兩張圖片疊加在一起,這里采用的是multiply模式。你也可以嘗試使用其他不同的模式來改變疊加效果。