在响应式图像上叠加网格 [英] Overlay grid on responsive image

问题描述

我有一个标准图像（这是因为bootstap的响应），并希望覆盖5％x 5％的标准网格。

我需要选取图像上的点，并且需要网格可见以及图像。

我通过表单上传图片，并将其显示在html上的表单位置中。我想知道如何在顶部添加额外的CSS - 将网格放在最上面。

请参阅下面的示例图片（我只将8格 - 但我希望5％的间距或10％的间距x和y）。

解决方案

使用两个

这些行用默认的

然后可以将此网格放置在

示例

* {margin：0;填充：0; box-sizing：border-box;} div {display：inline-block;位置：相对; margin：10px;} div：after {content：'';位置：绝对;身高：100％;宽度：100％; top：0;左：0;背景：线性渐变（到底部，＃000 2px，透明2px），线性渐变（到右侧，＃000 2px，透明2px）;背景大小：10％; background-color：rgba（255，0，0，0.2）; padding：1px;}

< div> < img src =http://www.placehold.it/300width =300height =300/>< / div>< div> < img src =http://www.placehold.it/200width =200height =200/>< / div>< div> < img src =http://www.placehold.it/100width =100height =100/>< / div>

I have a standard image (that is responsive because of bootstap) and would like to overlay a standard grid 5% x 5% on top of it.

I need to pick points on the images and need the grid to be visible as well as the image.

I upload the image via form and it show up in a form location on the html. I would like to know how to add additional css on top it - to get the grid on top it.

See the image below for a sample (I only put 8 grid - but I would like 5% spacing or 10% spacing both x and y).

解决方案

Using two linear-gradients, we can create two simple lines which are then repeated every nth-percent with background-size. It looks like this:

background: linear-gradient(to bottom, #000 2px, transparent 2px), 
linear-gradient(to right, #000 2px, transparent 2px);
background-size: 10%;

The two gradients create two intersecting lines which are a percentage size long, like this:

These lines are repeated with the default background-repeat: repeat, which creates a grid, like this:

This grid can then be placed on an :after pseudo element, which is then placed over the image:

Example

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
div {
  display: inline-block;
  position: relative;
  margin: 10px;
}
div:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, #000 2px, transparent 2px), linear-gradient(to right, #000 2px, transparent 2px);
  background-size: 10%;
  background-color: rgba(255, 0, 0, 0.2);
  padding: 1px;
}

<div>
  <img src="http://www.placehold.it/300" width="300" height="300" />
</div>

<div>
  <img src="http://www.placehold.it/200" width="200" height="200" />
</div>

<div>
  <img src="http://www.placehold.it/100" width="100" height="100" />
</div>

这篇关于在响应式图像上叠加网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！