css - 在图像 html5 中定义对象

Question

我有一个 Bootstrap 列:

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

和示例图片:

我的问题是:无论如何我都可以将图像上的这两个正方形定义为对象吗？我面临的问题是，我有一张图片，其中包含一些需要定义为对象的元素......我想弄清楚最好的方法是什么，如果可能的话？有什么软件可以帮助您解决这个问题吗？一些图像到 html 生成器或其他东西？能为我提供解决方案的人将获得永恒的荣耀!非常感谢您的回复。

Answer 1

也许您只想输入 image map ？

或者，也许，您想在图像上放置其他元素(参见:下面的示例)？

或者，您应该使用 background image ？

也许您的用例可以不过分简化，我们能够为您的确切需求提供更好的解决方案。

您需要了解不同的用户和环境，特别是如果您打算将此想法用于导航。

.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="/image/0ClBU.jpg" alt="Image with rectangles">
    <a class="rectangle first" href="#">First rectangle</a>
    <div class="rectangle second">Second rectangle</div>
  </div>
</div>