html里给一张背景图片添加上地点等标注

在 HTML 中给一张背景图片添加标注可以使用 CSS 的 `position` 和 `::before` 或 `::after` 伪元素来实现。以下是一个示例代码：

<div class="background-image">
  <div class="location-marker" style="top: 20%; left: 50%;">New York</div>
  <div class="location-marker" style="top: 60%; left: 30%;">Paris</div>
  <div class="location-marker" style="top: 70%; left: 70%;">Tokyo</div>
</div>

在上面的代码中，`background-image` 类用于设置背景图片，并且子元素 `location-marker` 用于添加地点标注。`style` 属性用于设置每个标注的位置。

接下来，可以使用 CSS 来为 `location-marker` 元素添加样式：

.background-image {
  background-image: url('path/to/image.jpg');
  background-size: cover;
  width: 100%;
  height: 100vh;
  position: relative;
}

.location-marker {
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}

.location-marker::before {
  content: '';
  position: absolute;
  border-top: 10px solid #fff;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}

在上面的代码中，`background-image` 类的样式用于设置背景图片，并为其设置了 `position: relative;` 属性。`location-marker` 类的样式用于设置标注的样式，包括位置、大小、背景颜色、圆角等。`::before` 伪元素用于设置标注的箭头样式。

在上面的示例中，`location-marker` 元素的位置是使用 `style` 属性直接设置的。如果需要动态地添加标注，可以使用 JavaScript 来计算位置并设置 `style` 属性。