CSS是一種用于網站樣式設計的語言，它可以很好地控制網站的布局和樣式。今天我們要介紹的是如何在CSS中給圖片添加模塊。

首先，我們需要在HTML中將圖片添加進來：

<img src="path/to/image.jpg" alt="description of image">

這是一個基本的HTML圖片標簽。接下來，我們需要使用CSS來控制圖片的樣式。

我們可以使用“position:relative”來定義圖片相對于文本流的位置。然后使用“left”和“top”來定義圖片的具體偏移量。這樣可以使得我們后續添加的模塊相對于圖片的位置進行定位。

img {
position: relative;
left: 50px;
top: 50px;
}

接著，我們要在圖片上添加模塊?？梢允褂谩?:before”或“::after”偽元素來創建一個模塊，然后使用“position:absolute”來定義模塊與圖片的位置關系。

img::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: red;
}

在上面的代碼中，我們定義了一個寬高為50px的紅色方塊模塊，它位于圖片的左上角。

最后，我們可以繼續添加更多的模塊，如線條、圓形、文本等。這樣就可以為圖片增添更多的個性化元素了。

通過上面的步驟，我們可以在CSS中很容易地為圖片增加模塊。這種方法在網站的設計中非常常見，可以增加網站的美感和個性化元素。