Q2：如何在图片上加标点+横线+注释？

A：html：<div class=”annotation-container”>
<img src=”http://wangd17.sg-host.com/wp-content/uploads/2024/06/图片4n.png” class=”annotated-image” style=”transform: scale(1.0);”>

<!– 注释 1 –>
<div class=”annotation” style=”top: 8%; left: 26%;”>
<span class=”dot”></span>
<div class=”line-text-container” style=”width: 0px; display: flex; align-items: center; flex-direction: row-reverse;”>
<span class=”line” style=”width: 100px; height: 2px; background-color: blue;”></span>
<span class=”text” style=”color: white; margin-right: 10px;”>无需术前注册、标定</span>
</div>
</div>

<!– 注释 2 –>
<div class=”annotation” style=”top: 34%; left: 10%;”>
<span class=”dot”></span>
<div class=”line-text-container” style=”width: 0px; display: flex; align-items: center; flex-direction: row-reverse;”>
<span class=”line” style=”width: 100px; height: 2px; background-color: blue;”></span>
<span class=”text” style=”color: white; margin-right: 10px;”>术前布置更简单</span>
</div>
</div>

<!– 注释 3 –>
<div class=”annotation” style=”top: 49%; left: 9%;”>
<span class=”dot”></span>
<div class=”line-text-container” style=”width: 0px; display: flex; align-items: center; flex-direction: row-reverse;”>
<span class=”line” style=”width: 100px; height: 2px; background-color: blue;”></span>
<span class=”text” style=”color: white; margin-right: 10px;”>视觉臂可随意移动
术中无遮挡
</span>
</div>
</div>

<!– 注释 4 –>
<div class=”annotation” style=”top: 60%; left: 85%;”>
<span class=”dot”></span>
<div class=”line-text-container” style=”width: 0px; display: flex; align-items: center; flex-direction: row;”>
<span class=”line” style=”width: 100px; height: 2px; background-color: blue;”></span>
<span class=”text” style=”color: white; margin-left: 10px;”>视觉臂可随意移动
术中无遮挡
</span>
</div>
</div>
</div>

CSS：

.annotation-container {
position: relative;
display: inline-block;
}

.annotated-image {
display: block;
max-width: 100%;
}

.annotation {
position: absolute;
display: flex;
align-items: center;
cursor: move; /* 添加拖动光标 */
}

.dot {
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
position: relative;
z-index: 1;
}

.line-text-container {
display: flex;
align-items: center;
justify-content: flex-start;
position: absolute;
flex-direction: row-reverse; /* 让线条在左边，文字在右边 */
}

.line {
height: 2px;
background-color: #1E90FF0;
flex-shrink: 0;
}

.text {
background-color: #1E90FF0;
padding: 2px 5px;
white-space: nowrap;
color: red;
margin-right: 10px; /* 确保文字和线条之间有间距 */
}