使用CSS在图像上绘制圆圈

Question

是否可以使用CSS在图像上方绘制圆圈？

我有链接的图像与区域1，区域2，区域3，和区域4 区我具有与在多选选择列表这些值销售团队的形式。 如果任何区域的选择，正确的区域将被盘旋。 这是选择的区域1、2和4的示例。 1区，2区和4区

目前，我有16种不同的图像，每种可能的圆圈区域组合都使用Visualforce拉出正确的图像。 根据输入。

我只是被要求在该图像上添加第5个区域，这使我在25个图像上可以进行所有可能的区域选择，并且在我的可视页面中有很长的条件语句。

无论如何，我可以使用CSS或HTML在一张图片上绘制圆圈，而不是针对每种可能的区域组合使用不同的图片吗？

非常感谢您的帮助。

Answer 1

这是一些执行此操作的代码：

 function drawZones(zoneList) { var container = document.getElementById('zone-image-container'); // Remove existing circles. for (var i = container.children.length - 1; i > 0; i--) { container.removeChild(container.children[i]); } // Add circles. for (var i = 0; i < zoneList.length; i++) { var zone = document.createElement('div'); zone.className = 'zone-circle zone-' + zoneList[i]; container.appendChild(zone); } } drawZones([1, 2, 4]); 

 #zone-image-container { /* Cause the absolutely positioned circles to be relative to the container */ position: relative; } /* The image must have a fixed size for the size and positions of the */ /* circles to be consistantly correct */ img { width: 400px; } .zone-circle { position: absolute; width: 80px; height: 40px; border-radius: 40px; border: 5px solid red; left: 160px; } /* Custom Y position for each zone. */ .zone-4 { top: 30px; } .zone-3 { top: 100px; } .zone-2 { top: 170px; } .zone-1 { top: 240px; } 

 <div id="zone-image-container"> <img src="https://i.stack.imgur.com/paJw2.png" /> </div> 

签出笔：

https://codepen.io/anon/pen/zJWWYb