CSS背景顏色上加圖片是網頁設計中常用的一種技巧。通過背景圖片的添加，可以增加頁面的美觀度和設計感。在CSS中，我們可以使用如下代碼來添加背景顏色和圖片：

background-color: #fff; /* 背景顏色 */
background-image: url("example.jpg"); /* 背景圖片 */
background-repeat: no-repeat; /* 圖片不重復 */
background-position: center; /* 圖片居中 */

以上代碼分別表示設置背景顏色為白色，添加名為example的圖片作為背景，并且讓圖片不重復出現，居中顯示在頁面中。在實際的網頁設計中，我們還可以通過修改其他屬性來實現更加豐富的背景效果，例如：

background-size: cover; /* 按比例拉伸圖片，填滿整個背景 */
background-attachment: fixed; /* 固定背景，不隨頁面滾動而移動 */
background-blur: 5px; /* 模糊背景 */
background-color: rgba(255, 255, 255, 0.7); /* 使用半透明色值 */

另外，在使用背景圖片時，我們需要注意以下幾點：

• 圖片文件大小不要過大，以免影響頁面加載速度。
• 圖片文件格式要選擇適合的格式（例如jpg、png等），以保證圖片質量和占用空間。
• 背景圖片的選擇要與頁面設計風格相符合，以保持整體協調性。

使用CSS背景顏色上加圖片，可以讓網頁設計更加獨特和有特色。通過巧妙的設置，可以讓頁面呈現出不同的藝術感和氛圍，提升用戶體驗和網站形象，因此大家可以嘗試在自己的網頁設計中應用這一技巧。