在CSS中使用圖片注釋是一種非常常用的方法，它可以幫助我們更好地組織和管理CSS代碼，同時也可以讓其他人更加容易地理解我們的代碼。

在CSS中添加圖片注釋非常簡單，只需要在需要注釋的地方添加一個::before或者::after偽元素，并為這個偽元素添加一個content屬性來顯示我們想要的注釋內容，接下來將圖片作為背景顯示即可。

/* 使用 ::before 偽元素添加圖片注釋 */
.box::before {
content: "";
background-image: url("path/to/image.png");
background-repeat: no-repeat;
background-position: center;
display: block;
width: 20px;
height: 20px;
margin-right: 10px;
float: left;
}

通過上面的代碼，我們可以在CSS中使用 ::before 偽元素添加圖片注釋，并通過content屬性設置注釋內容，后面的屬性則是定義了圖片的樣式和布局。

我們也可以使用 ::after 偽元素來實現圖片注釋，代碼如下：

/* 使用 ::after 偽元素添加圖片注釋 */
.box::after {
content: "";
background-image: url("path/to/image.png");
background-repeat: no-repeat;
background-position: center;
display: inline-block;
width: 20px;
height: 20px;
margin-left: 10px;
vertical-align: middle;
}

上面的代碼中使用了 ::after 偽元素，并通過content屬性設置注釋內容，后面的屬性則是定義了圖片的樣式和布局，注意這里使用了display: inline-block和vertical-align: middle屬性來讓圖片與文字在同一行顯示。

總之，通過圖片注釋，我們可以更加方便地閱讀和管理CSS代碼，同時也可以為我們的網站或應用界面增加一些視覺效果，提升用戶體驗。