我有一个引导colum：

<div class="col-md-4 col-xs-12">
   <img src="sample.jpg" style="height:100vh;width:100%;" /></div>

和样本图片：

我的问题是：有没有反正我可以在图像上定义这两个方块作为一个对象？我面临的问题是，我有一些图片有一些元素，需要被定义为一个对象...我试图找出什么是好的方法，如果它是可能的话？有没有任何软件，这可以帮助你这个？一些图像到html生成器或somethin？永恒的荣耀给可以呈现我解决方案的人！我很感谢您的回复。

也许你想要做的是一个影像地图？

或者，也许，你想在图像上放置其他元素（见下面的例子）？

或者，你应该使用背景图片？

也许你的用例可以不简单化，我们很能为您的确切需要更好的解决方案。

您需要了解不同的用户和环境，尤其是如果您打算使用此构思进行导航。

.rectangles { border: solid red 1px; position: relative; } .rectangles img { outline: dashed blue 1px; width: 100%; } .rectangle { position: absolute; outline: dashed red 1px; color: #fff; text-align: center; } .rectangle:hover { background: red; } .rectangle.first { left: 24.2%; top: 14.4%; width: 30.9%; height: 20.2%; } .rectangle.second { left: 24.9%; top: 52.7%; width: 29.9%; height: 22.1%; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="col-md-4 col-xs-12 rectangles"> <img src="https://i.stack.imgur.com/0ClBU.jpg" alt="Image with rectangles"> <a class="rectangle first" href="#">First rectangle</a> <div class="rectangle second">Second rectangle</div> </div> </div>

上篇文章：关闭在语义UI中不会在移动设备上显示的画布？
下篇文章：Javascript改变图像源不工作