时间戳

首页 > 解决方案 > 如何在图像上覆盖可滚动容器中的图像

html - 如何在图像上覆盖可滚动容器中的图像

问题描述

我有一个不同大小的图像。此图像位于带有overflow: auto. 我想在这个图像上放置一个网格 - 只要图像小于容器，它就可以正常工作。一旦容器有滚动条，网格覆盖就被限制在容器的高度/宽度内，不会覆盖图像。

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

（实际用例会有多个叠加层，但对于这个演示，一个叠加层应该足以演示问题）。

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

将图像放在不同的标签中可能是一种选择，但由于图像大小可能会有所不同，我不能有一个固定大小的 div 也可以将图像作为背景图像 - 至少我不知道如何制作div 具有图像的实际大小。

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

在用户建议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>

标签： htmlcss

解决方案

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>

推荐阅读