CSS作為前端開發的基礎知識，其中背景顏色和背景圖是比較基礎且使用頻率較高的幾種樣式。下面我們一起來了解一下它們的應用方法：

// 設置背景顏色
background-color: #FF0000; // 16進制顏色值
background-color: rgb(255, 0, 0); // RGB顏色值
background-color: rgba(255, 0, 0, 0.5); // RGBA顏色值（帶透明度）
// 設置背景圖片
background-image: url('image.jpg'); // 圖片路徑（相對路徑或絕對路徑）
background-repeat: repeat; // 圖片平鋪方式（repeat: 平鋪，no-repeat: 不平鋪，repeat-x: 水平平鋪，repeat-y: 垂直平鋪）
background-position: left top; // 圖片位置（默認左上角）
background-size: cover; // 圖片尺寸（cover：按比例縮放鋪滿，contain：按比例縮放鋪滿但不超過容器大小，%：按百分比設置）

通過上述代碼可以看出，設置背景顏色和背景圖片都是通過CSS樣式中的background屬性來實現的，不同的是背景顏色只需要設置顏色值即可，而背景圖片還需要設置圖片路徑、平鋪方式、位置、尺寸等多個屬性。

需要注意的是，在設置背景圖片時，由于圖片文件較大，加載速度可能會影響網頁的加載速度，因此應該盡量使用優化后的小圖片，并放置在適當的位置，同時建議使用懶加載等技術來提高頁面加載速度。