2

我有一个覆盖图像的 div。顶部 div 有一些交互式创建的 svg 内容。底层图像有滚动条。当我滚动图像时，我希望覆盖 div 的内容也相应地滚动。换句话说，在顶部 div 上交互创建的任何项目都应该像直接在图像上创建一样。它应该相对于底层图像具有固定的位置，并随着图像的滚动而滚动。

以下是我所拥有的：

<div style="overflow: scroll; width: 800px; height: 680px">
          <img style="max-width: 780px; display: block;"
            src="someimage.png" />

        <div style="display: block; max-width: 780px; top:70px; left:0px; border: solid 1px red; position: absolute">This text should scroll when the image behind is scrolled.</div>

    </div>

我愿意使用 jquery 或任何其他插件来实现这种行为。任何建议将不胜感激。

4

3 回答 3

0

对于我正在编写的编辑器，我遇到了同样的问题：一个包含图像的溢出：自动 div 和一个用于动态注释图像的 SVG 覆盖。这对我有用（来自 amdoghal 的背景图像线索为我指明了正确的方向 - dummy-map.png 是我正在注释的图像）。

<div id="wme_map" style="height: 800px; border: 1px solid black; padding:0; overflow: auto;">
    <div id="svg-overlay"  style="width: 1920px; height: 1080px; background-image: url(dummy-map.png)">
        <svg width="1920" height="1080">
            <rect x=20 y=20 width=200 height=32 style="stroke:red; fill:none; stroke-width:2;" />
        </svg>
    </div>              
</div>
于 2013-11-27T09:06:10.197 回答
0

为什么不使用图像作为 div 的背景并在 div 中键入任何内容将在图像之上

尝试关注

<div style="display: block; max-width: 780px; padding-top:70px; left:0px; border: solid 1px red;  background-image: url(someimage.png); height:1200px;">This text should scroll when the image behind is scrolled.</div>
于 2012-11-12T00:49:17.360 回答
0

根据 admoghal 的建议，我尝试了以下方法：

<div style="width: 900px; height: 600px; overflow-y: scroll; overflow-x: hidden; display: block; position: absolute;">
   <div class="scales" id="holder" style='left: 0px; top: 0px; width: 1200px; height: 1000px; overflow: hidden; display: block; position: relative; max-height: 1000px; max-width: 1200px; background-repeat: no-repeat; background-image: url("someimage.png"); background-size: contain;'>
   </div>
</div>

这在 Firefox 中运行良好，但由于“背景大小”在 IE 中不是有效属性，我必须使用http://louisremi.github.com/jquery.backgroundSize.js/demo/中的 backgroundSize 插件才能使其工作在 IE 中。虽然，现在我最终使用了 RaphaelJS 插件并使用它的图像功能将我的图像放在视口上。

于 2012-11-12T22:20:11.150 回答