如何在图片上覆盖图片，将图片覆盖在可滚动容器中

Question

我有一张尺寸不一的图像。此图像位于带有overflow: auto的容器中。 我想在此图像上放置一个网格-只要图像小于容器，效果很好。一旦容器具有滚动条，网格覆盖就会被限制在容器的高度/宽度上，并且不会覆盖图像。

请注意，fixed不是一个选项，因为这是一个简化的用例。我确实要求叠加层实际与图像一起滚动。

（实际用例将具有多个覆盖，但是对于此演示，单个覆盖就足以说明问题）。

缩放图像也不是一种选择。

可以将图像放置在不同的标签中，但是由于图像的大小可能会有所不同，因此我也无法将具有固定大小的div用作背景图像-至少我不知道该怎么做使该div具有图片的实际大小。

我想如果<img>可以是叠加层的容器，那很好，但是AFAIK img是一个自闭标签，不允许有孩子。

在其他类似的问题中，用户建议使用height: auto; min-height: 100%;作为覆盖层，但这不起作用，因为容器的大小并没有真正改变，只是内容变为可滚动。

如果可能的话，我想避免使用JS来计算覆盖层的高度和宽度。

.container {
  position: relative;
  height: 200px;
  overflow: auto;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    background-image: repeating-linear-gradient(  0deg, transparent, transparent 10px, #EEE 10px, #EEE 11px),
                        repeating-linear-gradient(-90deg, transparent, transparent 10px, #EEE 10px, #EEE 11px);  
}

<div class="container">
  <img src="https://lorempixel.com/500/500/" />
  <div class="overlay"></div>
</div>

Answer 1

CSS-Grid可以做到。.不需要position值。

.container {
  height: 200px;
  display: inline-grid;
  overflow: auto;
}

img,
.overlay {
  grid-column: 1;
  grid-row: 1;
}

.overlay {
  z-index: 2;
  background-image: repeating-linear-gradient( 0deg, transparent, transparent 10px, #eee 10px, #eee 11px), repeating-linear-gradient( -90deg, transparent, transparent 10px, #eee 10px, #eee 11px);
}

<div class="container">
  <img src="https://lorempixel.com/500/500/" />
  <div class="overlay"></div>
</div>

Answer 2

这里的问题是，总是在父元素的高度上测量100％。将高度更改为例如200px等于100%。

我认为最简单的解决方法是将整个东西包装在另一个具有固定高度的容器中，并使内部容器根据需要自由生长。这样，内部容器的高度将根据其子容器计算得出，并且网格100%的确是100％。

.outer-container {
  height: 200px;
  overflow: auto;
}

.container {
  position: relative;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    background-image: repeating-linear-gradient(  0deg, transparent, transparent 10px, #EEE 10px, #EEE 11px),
                        repeating-linear-gradient(-90deg, transparent, transparent 10px, #EEE 10px, #EEE 11px);  
}

<div class="outer-container">
  <div class="container">
    <img src="https://lorempixel.com/500/500/" />
    <div class="overlay"></div>
  </div>
</div>

Answer 3

我将添加一个元素（.wrapper）并将其用作尺寸参考。然后，您可以灵活选择图像大小。

.container {
  height: 200px;
  overflow: auto;
}

.container>.wrapper {
  position: relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 10px, #EEE 10px, #EEE 11px), repeating-linear-gradient(-90deg, transparent, transparent 10px, #EEE 10px, #EEE 11px);
}

<div class="container">
  <div class="wrapper">
    <img src="https://lorempixel.com/500/500/" />
    <div class="overlay"></div>
  </div>
  </div