CSS背景圖片上浮圖片，是網頁設計中常見的效果之一。這種效果可以讓網頁上的圖片更加突出和好看，也能夠增加頁面的層次感和美感。

.bg-image{
/*設置背景圖片*/
background-image: url("image/bg.jpg");
/*設置背景圖片不重復*/
background-repeat: no-repeat;
/*將背景圖片固定在容器*/
background-attachment: fixed;
/*設置背景圖片居中*/
background-position: center center;
/*設置背景圖片區域為容器*/
background-size: cover;
}
.bg-image .float-image{
/*設置圖片的位置*/
position: relative;
/*向上浮動10個像素*/
top: -10px;
}

通過上述代碼，可以看到，我們首先將背景圖片設置成不重復、固定在容器、居中且覆蓋整個容器的狀態。接著，我們在容器中加入一個浮動的圖片，將其相對容器進行定位，并設置上浮10像素。這樣，就能夠實現背景圖片上浮圖片的效果。

當然，以上只是最基礎的實現方式，我們還可以通過更多的CSS3特性和技巧，來優化和增強這個效果。比如，可以通過使用CSS3動畫，使得浮動圖片在鼠標移動到上面時出現漸變效果，或者使用CSS3過渡，使得浮動圖片在上浮時有一定的緩動效果。

總之，CSS背景圖片上浮圖片是一種非常實用和美觀的網頁設計效果，適用于各種類型的網頁。只需一些簡單的CSS代碼，就能輕松實現這一效果，給網站帶來更好的視覺體驗。