CSS可以實現多種背景圖像的設置,你可以通過設置多個background-image屬性來實現兩張圖片的疊加。下面我們用pre標簽來展示該段CSS代碼:
background-image: url("img1.png"), url("img2.png"); background-position: center center, center center; background-repeat: no-repeat; background-size: cover, cover;
上面的代碼將img1.png和img2.png兩張圖片設置為背景,同時將它們居中重疊在一起并且不重復,同時將其覆蓋整個背景。接下來我們可以在頁面中創建一個div元素,并在其中添加一些文本,代碼如下:
<div class="bg"> <p>這里是一些文本內容</p> </div>
最后,我們還需給剛剛創建的div元素加上CSS樣式:
.bg { background-image: url("img1.png"), url("img2.png"); background-position: center center, center center; background-repeat: no-repeat; background-size: cover, cover; padding: 50px; text-align: center; }
現在我們已經成功地創建了一個背景由兩張圖片組成的頁面,其中還有一些文本內容。可以試著改變圖片的大小,位置等參數,使頁面更加美觀。