CSS3背景圖片疊加讓網頁設計變得更加生動有趣。通過使用不同的圖片疊加，可以給網頁增添更具藝術性的質感。以下是一些CSS3背景圖片疊加的示例。

/* 疊加兩張背景圖片 */
.bg {
background-image: url("image1.jpg"), url("image2.jpg");
background-position: center center, top right;
background-repeat: no-repeat, repeat;
background-size: auto, cover;
}

使用逗號分隔，可以將多個背景圖片堆疊在一起。上面的代碼將兩張圖片分別放在中心和右上角，第一個圖片不重復，第二個圖片重復以適應整個元素。另外，第一個圖片大小為自動，第二個圖片大小為覆蓋元素.

/* 使用RGBA值創建半透明遮罩層 */
.overlay {
background-color: rgba(0, 0, 0, 0.5);
background-image: url("image.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

在這個例子中，使用了半透明黑色色值，以便增加遮罩層的透明度。通過將遮罩層和背景圖片疊加，可以讓背景圖片產生與眾不同的視覺效果。

/* 疊加線性漸變和背景圖片 */
.gradient {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.8)), url("image.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

最后一個示例將一個線性漸變背景圖與主背景圖片疊加。這個疊加效果會讓整張圖片更加顯眼醒目。

以上是三種常見的CSS3背景圖片疊加方式，通過這些細節處理，可以增強網頁視覺效果，讓用戶在使用網站時更加愉悅。