CSS樣式與圖片的搭配是網頁設計中的重要組成部分。在HTML網頁中，通過CSS樣式可以對圖片進行各種不同的處理，從而實現個性化、多樣化的效果展示。下面我們一起來看看如何在CSS樣式中加入圖片吧。

/* 在CSS中創建一個類，名為img-to-background */
.img-to-background {
background-image: url('img/bg.jpg'); /* 添加背景圖片 */
background-repeat: no-repeat; /* 背景圖片不重復 */
background-size: cover; /* 圖片大小適應div框 */
}

上述代碼中，我們首先創建了一個類名為“img-to-background”。隨后，我們添加了“background-image”的CSS樣式屬性，即指定需要添加的圖片路徑。通過預覽效果，我們可以發現，設置好的背景圖片已經成功地在網頁中顯示出來了。接下來，我們還可以按照需求對圖片進行各種不同的處理，比如調整圖片大小、添加圖片邊框等等。

實際上，在CSS樣式中添加圖片的方法不止以上一種。我們還可以使用“background-color”來設置背景色，在此基礎上再使用“background-image”添加圖片，從而實現更加具有層次感的設計效果。

/* 在CSS中創建一個類，名為img-with-background-color */
.img-with-background-color {
background-color: #f2f2f2; /* 添加背景色 */
background-image: url('img/icon.png'); /* 添加背景圖片 */
background-repeat: no-repeat; /* 背景圖片不重復 */
background-position: center; /* 背景圖片居中 */
padding: 20px; /* 內邊距為20px */
}

上述代碼中，我們創建了一個名為“img-with-background-color”的類。我們首先為這個類設置了背景色，隨后又添加了一張圖片。此外，我們希望這張圖片可以居中展示在頁面中央，因此還設置了“background-position: center”屬性。最后，我們在div框中也添加了內邊距為20px的樣式屬性。通過這樣的方式，我們可以實現更加豐富多彩的圖片效果。

綜上所述，CSS樣式與圖片的配合使用可以為網頁設計帶來更加精美、多彩的效果展示。在實際編寫代碼過程中，我們可以根據需求選用不同的CSS樣式屬性來實現所需的圖片效果。通過不斷實踐，我們可以更好地掌握CSS與圖片處理技巧，為網頁設計帶來更加出彩的效果。