CSS3漸變背景是現代網頁設計中經常使用的一種技術。通過漸變背景，可以使網頁的視覺效果更加豐富，增強用戶的體驗。除了常見的線性漸變和徑向漸變，我們還可以在漸變背景中加入圖片，從而實現更加復雜的效果。

實現漸變背景帶圖片需要用到CSS3的background-image和background-gradient兩個屬性。其中，background-image屬性用于設置漸變背景中的圖片，而background-gradient屬性則用于設置漸變效果。

.gradient-img {
background-image: url('background.jpg'); /* 設置背景圖片 */
background-size: cover; /* 設置背景圖片大小 */
background-repeat: no-repeat; /* 禁止背景圖片重復 */
background-attachment: fixed; /* 固定背景圖片不隨滾動條移動 */
background-color: transparent; /* 設置背景顏色透明 */
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), /* 設置線性漸變 */
url('background.jpg');
}

上面的代碼中，我們首先設置了背景圖片的路徑，并通過background-size、background-repeat和background-attachment屬性指定了圖片的大小、重復方式和是否固定。然后，我們使用background-image屬性將圖片和線性漸變結合起來。

在上面的代碼中，我們使用linear-gradient函數來實現線性漸變。其中，第一個參數rgba(0,0,0,0.6)表示漸變起點的顏色和透明度，而第二個參數rgba(0,0,0,0.6)則表示終點的顏色和透明度。通過在這兩個顏色之間生成一系列漸變色，就可以實現線性漸變效果。

除了線性漸變，我們還可以使用radial-gradient函數來實現徑向漸變效果。在設置徑向漸變時，我們需要指定漸變中心的位置和半徑，并設置以及起點和終點顏色和透明度。

.gradient-img {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: transparent;
background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), /* 設置徑向漸變 */
url('background.jpg');
}

上面的代碼中，我們使用circle關鍵字指定漸變中心為正中心，并使用at關鍵字指定漸變中心位置。如果需要設置其他位置的漸變中心，可以使用百分比或像素單位來進行調整。

總的來說，通過在漸變背景中加入圖片，可以實現更加豐富和復雜的效果。我們只需要根據需要設置好背景圖片的大小、重復方式和漸變效果，就可以輕松在網頁中實現炫酷的漸變背景效果。