CSS是一種用于網頁設計的語言，可以幫助我們設置元素的樣式。在網頁設計中使用圖片是常見的，如果想在圖片上添加指示點位，可以通過CSS來實現。

/* 在圖片上添加點位 */
.pic {
position: relative;
}
.pic::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: red;
border-radius: 50%;
}

上面的代碼中，我們首先將包含圖片的元素設置為相對定位（position: relative;），這樣我們才能在這個元素中使用絕對定位來添加點位。接下來我們使用偽元素（::before）來創建一個內容為空的元素，并將其設置為絕對定位（position: absolute;），使用transform屬性使其水平垂直居中，再使用background-color屬性設置其背景色為紅色，border-radius屬性將其設置為圓形。

在HTML代碼中，我們可以如下使用這個樣式：

<div class="pic">
<img src="example.jpg">
</div>

通過這種方式，在圖片上添加點位就變得簡單易行了。當然，我們還可以在樣式中自定義點位的樣式，并使用JavaScript來動態地為每個點位添加響應動作，讓這個效果更加完美。