Css 在背景图像上定位多个div

我正在尝试在此背景图像上放置方形div：

像这样：

400px 400px所以50px 50px 64平方分。顺便说一下，不需要画任何东西，我只需要不同的可点击区域，这就是为什么

---

实现这一点的最佳响应方式是什么

如果您只想获得视觉输出，而不需要64

div

，则可以使用渐变：

.farmfield{
背景：
重复线性渐变（向右，#000 0px，#000 2px，透明2px，透明48px，#000 48px，#000 50px），
重复线性渐变（到底部，#000 0px，#000 2px，透明2px，透明48px，#000 48px，#000 50px），
网址（“https://i.stack.imgur.com/TYnNs.png）中心/盖；
宽度：400px；
高度：400px；
边框：2倍实心
}

---

如果您只想获得视觉输出，而不需要64

div，您可以使用渐变：


.farmfield{
背景：
重复线性渐变（向右，#000 0px，#000 2px，透明2px，透明48px，#000 48px，#000 50px），
重复线性渐变（到底部，#000 0px，#000 2px，透明2px，透明48px，#000 48px，#000 50px），
网址（“https://i.stack.imgur.com/TYnNs.png）中心/盖；
宽度：400px；
高度：400px；
边框：2倍实心
}
在图像中设置可点击区域的正确方法是使用
地图
和
区域
s集合，它们是为此而设计的。
您可以通过在img标记中指定
usemap=“#myMapId”
来使用它们，然后创建一个包含您需要的每个可单击区域的地图。然后像任何Dom元素一样将单击事件附加到该区域。
检查此处区域标记的文档：

请参见此处的一个工作示例：
在图像中设置可单击区域的正确方法是使用
贴图和
区域集，它们是为此而设计的。
您可以通过在img标记中指定
usemap=“#myMapId”
来使用它们，然后创建一个包含您需要的每个可单击区域的地图。然后像任何Dom元素一样将单击事件附加到该区域。
检查此处区域标记的文档：

请参见此处的工作示例：
绘制正方形不是必需的，我将其作为示例。我希望使每个正方形都可单击，这就是我放置该图像的原因绘制正方形不是必需的，我将其作为示例。我希望使每个正方形都可单击，这就是我放置该图像的原因
.farmfield{
  background-image: url("http://i.hizliresim.com/aYdRrz.png");
  width:400px;
height: 400px;

}