本文目錄導(dǎo)讀：

1. 使用背景圖像
2. 使用img標(biāo)簽結(jié)合CSS樣式

CSS在網(wǎng)頁(yè)設(shè)計(jì)中有著廣泛的應(yīng)用，其中在盒子中添加圖片是常見的操作之一，除了HTML標(biāo)簽外，CSS樣式表可以幫助我們更好地控制圖片的顯示方式和位置，下面介紹如何使用CSS在盒子中添加圖片。

使用背景圖像

在CSS中，可以使用background-image屬性將圖像作為盒子的背景。

div {
  background-image: url("image.jpg"); /* 將圖片作為背景 */
  width: 300px; /* 設(shè)置盒子寬度 */
  height: 200px; /* 設(shè)置盒子高度 */
  background-repeat: no-repeat; /* 不重復(fù)顯示背景圖片 */
  background-position: center; /* 圖片居中顯示 */
}

這種方法適用于需要填充整個(gè)盒子的背景圖像，或者作為裝飾性元素使用。

使用img標(biāo)簽結(jié)合CSS樣式

另一種常見的方法是在HTML中使用img標(biāo)簽插入圖片，然后通過CSS樣式控制圖片的位置和大小。

<div class="image-box">
  <img src="image.jpg" alt="示例圖片">
</div>

然后在CSS樣式表中設(shè)置樣式：

.image-box {
  width: 300px; /* 設(shè)置盒子寬度 */
  height: 200px; /* 設(shè)置盒子高度 */
  overflow: hidden; /* 超出盒子的部分隱藏 */
}
.image-box img {
  width: 100%; /* 使圖片寬度適應(yīng)盒子寬度 */
  height: auto; /* 自動(dòng)調(diào)整圖片高度以保持比例 */
  display: block; /* 使圖片塊級(jí)顯示，避免間隙 */
}

這種方法適用于需要***控制圖片大小和位置的場(chǎng)景，或者需要在盒子中展示多張圖片時(shí)，可以根據(jù)需要調(diào)整樣式，如設(shè)置邊距、邊框等。