本文目錄導讀：

1. 使用CSS添加文字標記
2. 使用CSS添加圖形標記
3. 使用CSS添加圖像標記

CSS在圖片上做標記的方法

CSS是一種用于描述網頁樣式的語言，除了可以用來美化網頁，還可以用來在圖片上添加標記，下面是一些關于如何在圖片上使用CSS添加標記的方法。

使用CSS添加文字標記

在CSS中，可以使用position屬性將文字標記定位在圖片上的某個位置，以下代碼可以將文字標記定位在圖片的右下角：

img {
  position: relative;
}
.mark {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

在HTML中，可以使用class屬性將標記添加到圖片上：

<img src="image.jpg" class="mark">

使用CSS添加圖形標記

除了文字標記，CSS還可以用來添加圖形標記，以下代碼可以添加一個圓形標記：

img {
  position: relative;
}
.mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
}

在HTML中，可以使用class屬性將標記添加到圖片上：

<img src="image.jpg" class="mark">

使用CSS添加圖像標記

除了文字標記和圖形標記，CSS還可以用來添加圖像標記，以下代碼可以添加一個圖像標記：

img {
  position: relative;
}
.mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  background-image: url('image.png');
  background-size: cover;
}

在HTML中，可以使用class屬性將標記添加到圖片上：

<img src="image.jpg" class="mark">

是一些關于如何在圖片上使用CSS添加標記的方法，通過CSS的position屬性，可以將標記定位在圖片上的任意位置，并使用不同的樣式來美化標記。