CSS盒模型是CSS布局的基礎(chǔ)，它可以將頁(yè)面元素看作是一個(gè)個(gè)的盒子，通過(guò)調(diào)整盒子的屬性，如大小、位置、顏色等，來(lái)實(shí)現(xiàn)頁(yè)面的布局效果，在CSS盒模型中，加入圖片可以通過(guò)設(shè)置背景圖片或者添加圖片元素來(lái)實(shí)現(xiàn)。

我們來(lái)看如何設(shè)置背景圖片，在CSS中，可以使用background-image屬性來(lái)設(shè)置元素的背景圖片，我們可以將某個(gè)元素的背景圖片設(shè)置為一張圖片：

div {
  background-image: url("image.jpg");
}

這樣，該元素的背景就會(huì)顯示為image.jpg這張圖片。

我們還可以在HTML中添加圖片元素，然后在CSS中設(shè)置該元素的盒模型屬性，我們可以創(chuàng)建一個(gè)img元素，并將其大小設(shè)置為寬度為200像素、高度為300像素：

<img src="image.jpg" alt="圖片">

img {
  width: 200px;
  height: 300px;
}

這樣，圖片就會(huì)顯示為寬度為200像素、高度為300像素的圖片，并且會(huì)保持其原始的長(zhǎng)寬比。

需要注意的是，在CSS盒模型中，圖片的位置可以通過(guò)position屬性來(lái)調(diào)整，我們可以將圖片設(shè)置為相對(duì)于其包含塊的***位置：

img {
  position: absolute;
  top: 10px;
  left: 20px;
}

這樣，圖片就會(huì)出現(xiàn)在其包含塊的上方10像素、左側(cè)20像素的位置。