在網頁設計中，圖片是一個不可或缺的元素。可以使用 HTML 的<img>標簽來為網頁添加圖片，而 CSS 中的盒子則可以用來控制圖片的顯示效果。在 CSS 中添加圖片有兩種方法：背景圖和內聯圖。

背景圖

背景圖是指將圖片作為背景，通過 CSS 設置背景圖的屬性來實現。可以用以下代碼設置背景圖：

.box {
background-image: url("image.jpg");
background-size: cover;
}

其中，background-image屬性設置圖片的路徑，background-size屬性設置圖片的大小。可以使用以下值：

• contain：將圖像縮放到將其寬度和高度最多填充為圖像容器的大小。
• cover：將圖像縮放到完全覆蓋圖像容器。

內聯圖

內聯圖是指將圖片嵌入到 HTML 內部，作為標簽的一部分。可以用以下代碼設置內聯圖：

其中，src屬性設置圖片的路徑，alt屬性設置圖片的描述。使用<img>標簽時，需要注意以下幾點：

• 確保圖片路徑正確，并且能夠被服務器訪問到。
• 添加alt屬性，以提高圖片的可訪問性。如果圖片無法加載，alt屬性的文字可以作為替代信息。
• 使用 CSS 控制圖片的樣式，例如指定寬度和高度、添加邊框等。

使用內聯圖和背景圖有不同的適用場景。一般來說，背景圖適合作為裝飾或背景，而內聯圖適合作為網頁內容中的一部分。