在响应式图像上叠加网格

Question

我有一个标准图像（由于引导程序而具有响应性），并希望在其上覆盖一个 5% x 5% 的标准网格。

我需要在图像上选取点，并且需要网格和图像一样可见。

我通过表单上传图像，它显示在 html 的表单位置。我想知道如何在它上面添加额外的 CSS - 让网格在它上面。

请参见下图的示例（我只放置了 8 个网格 - 但我想要 x 和 y 的间距为 5% 或 10%）。

Answer 1

在 div 的伪元素上使用两个 linear-gradients，一个在 ::before 上，一个在 ::after 上，我们可以创建两条简单的线，然后每隔 n% 重复一次 background-size。 ::after 伪元素旋转 90 度以创建水平线。它看起来像这样：

.grid::before,
.grid::after {
  background: linear-gradient(to right, #000 2px, transparent 2px);
  background-size: 10%;
}

.grid::after {
  transform: rotate(90deg);
}

这两个渐变创建了两条相交的线，长度为百分比大小，如下所示：

这些行与默认的background-repeat: repeat 重复，这会创建一个网格，如下所示：

当::before 和::after pseudo elements 放在图像上时，我们会得到：

你可以创建一个固定的网格大小，使用一个固定的像素background-size：

.fixed::before,
.fixed::after {
  background-size: 23px;
}

示例

注意如何在::before 上使用box-shadow: inset 0px 0px 0 2px #000; 为整个网格绘制轮廓。

*,
*::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid img {
  display: block;
}

.grid {
  display: inline-block;
  position: relative;
  margin: 10px;
  vertical-align: top;
}

.grid::before,
.grid::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #000 2px, transparent 2px);
  background-size: 10%;
}

.grid::before {
  background-color: rgba(255, 0, 0, 0.56);
  box-shadow: inset 0px 0px 0 2px #000;
}

.grid::after {
  transform: rotate(90deg);
}

.fixed::before,
.fixed::after {
  background-size: 23px;
}

<div class="grid">
  <img src="https://dummyimage.com/300x300/ccc" width="300" height="300" />
</div>

<div class="grid">
  <img src="https://dummyimage.com/200x200/ccc" width="200" height="200" />
</div>

<div class="grid">
  <img src="https://dummyimage.com/100x100/ccc" width="100" height="100" />
</div>

<div class="grid fixed">
  <img src="https://dummyimage.com/500x500/ccc" width="500" height="500" />
</div>