在背景图像上放置多个Div

Question

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

赞：

.farmfield{
  background-image: url("http://i.hizliresim.com/aYdRrz.png");
  width:400px;
height: 400px;

}

400像素x 400像素，所以50像素x 50像素64平方格。通过这种方式，无需绘制任何东西，我只需要不同的可点击区域，这就是为什么。

做到这一点的最佳响应方法是什么？

Answer 1

如果只需要视觉输出而无需64 div，则可以使用渐变来实现：

.farmfield {
  background: 
   repeating-linear-gradient(to right,#000 0px,#000 2px,transparent 2px,transparent 48px,#000 48px,#000 50px),
   repeating-linear-gradient(to bottom,#000 0px,#000 2px,transparent 2px,transparent 48px,#000 48px,#000 50px),
   url("https://i.stack.imgur.com/TYnNs.png") center/cover;
  width: 400px;
  height: 400px;
  border:2px solid
}

<div class="farmfield">

</div>

如果您需要可点击区域，那么我认为CSS网格是一个很好的解决方案，因为您只需要通过调整父属性来控制网格即可。

.farmfield {
  background:
   url("https://i.stack.imgur.com/TYnNs.png") center/cover;
  width: 400px;
  height: 400px;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
  border:2px solid;
}
.farmfield > * {
  border:2px solid;
}
.farmfield > *:hover {
  background:red;
}

<div class="farmfield">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

对于旧的浏览器，您可以考虑使用float：

.farmfield {
  background:
   url("https://i.stack.imgur.com/TYnNs.png") center/cover;
  width: 400px;
  height: 400px;
  overflow:hidden;
  border:2px solid;
}
.farmfield > * {
  border:2px solid;
  float:left;
  width:calc(400px / 8);
  height:calc(400px / 8);
  box-sizing:border-box;
}
.farmfield > *:hover {
  background:red;
}

<div class="farmfield">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

Answer 2

在图像中具有可点击区域的正确方法也是使用maps和area的集合，它们是为此而设计的。 通过在img标签中指定usemap="#myMapId"来使用它们，然后创建一个包含所需的每个可单击区域的地图。然后，将单击事件像任何Dom元素一样附加到该区域。 在此处查看区域标签的文档：https://www.w3schools.com/tags/tag_area.asp

在此处查看有效的示例：https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap