在網(wǎng)頁設(shè)計中，圖片的有無和位置是非常關(guān)鍵的因素之一。但是，如何在圖片上插入盒子并設(shè)置其樣式卻是一個需要掌握的基本技能。在本文中，我們將介紹如何使用CSS在圖片上插入盒子，并設(shè)置盒子的樣式。

首先，在 HTML 代碼中，我們需要用一個 DIV 包裹圖片，并給這個 DIV 添加一個類名（如“wrapper”），以便于在 CSS 中進(jìn)行定位：

<div class="wrapper">
<img src="example.jpg" alt="Example Image">
</div>

然后，在 CSS 中，我們需要為這個包裹圖片的 DIV 設(shè)置絕對定位（position: absolute），并設(shè)置其 left、top、right、bottom 屬性來確定盒子的位置。例如，我們希望在圖片的右上方插入一個黑色背景的盒子，那么對應(yīng)的 CSS 代碼如下：

.wrapper {
position: relative;
}
.wrapper::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background-color: black;
}

在上面的代碼中，我們使用了偽類 ::before 來插入一個“偽元素”（也可以使用 ::after），并在其中設(shè)置了盒子的樣式，包括寬度、高度和背景顏色。

需要注意的是，由于我們設(shè)置了父元素 .wrapper 的定位屬性為 relative，所以 ::before 偽元素的位置是以 .wrapper 為基準(zhǔn)的。

最后，我們可以根據(jù)需要設(shè)置盒子的其他樣式，例如邊框、圓角、內(nèi)邊距等。完整的代碼如下：

.wrapper {
position: relative;
}
.wrapper::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background-color: black;
border: 3px solid white;
border-radius: 10px;
padding: 10px;
}

通過以上的代碼，我們成功地在圖片上插入了一個盒子，并設(shè)置了其樣式。這種技巧可以幫助我們更好地控制網(wǎng)頁元素的位置和樣式，提高網(wǎng)頁設(shè)計的效果。