html – 如何在图像上进行叠加覆盖可滚动容器中的图像

概述我有一个不同大小的图像.此图像位于具有overflow：auto的容器内. 我想在这个图像上放置一个网格 – 只要图像小于容器,它就可以正常工作.只要容器有滚动条,网格覆盖就会限制在容器的高度/宽度范围内,并且不会覆盖图像. 请注意,fixed不是一个选项,因为这是一个简化的用例.我确实要求叠加层实际上与图像一起滚动. (实际用例将有多个叠加,但对于此演示,单个叠加应该足以证明问题). 缩放图像也 我有一个不同大小的图像.此图像位于具有overflow：auto的容器内.
我想在这个图像上放置一个网格 – 只要图像小于容器,它就可以正常工作.只要容器有滚动条,网格覆盖就会限制在容器的高度/宽度范围内,并且不会覆盖图像.

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

(实际用例将有多个叠加,但对于此演示,单个叠加应该足以证明问题).

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

将图像放在不同的标签中可能是一个选项,但由于图像大小可能会有所不同,我不能有一个固定大小的div,它将图像作为背景图像 – 至少我不知道如何制作div具有图像的实际大小.

我想如果< img>会很好.可能是叠加层的容器,但AFAIK,img是一个自动关闭的标签,不允许生孩子.

在其他类似问题中,用户建议使用height：auto;最小高度：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,#EEE 11px);  }

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

解决方法 css-GrID可以做到这一点……不需要位置值.

.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,#eee 10px,#eee 11px),repeating-linear-gradient( -90deg,#eee 11px);}

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

总结

以上是内存溢出为你收集整理的html – 如何在图像上进行叠加覆盖可滚动容器中的图像全部内容，希望文章能够帮你解决html – 如何在图像上进行叠加覆盖可滚动容器中的图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。