嵌入 pdf 上方的叠加图像

发布于 2024-11-07 16:54:26 字数 846 浏览 0 评论 0原文

我正在尝试将图像覆盖在嵌入 iFrame 的 pdf 之上。

此代码导致图像落在 iFrame 后面（通过将底部属性更改为 -10px 进行测试，并且图像的底部变得可见）

我知道的唯一两种方法是使用 z-index，并且事实位置绝对应该放置顶部的对象，但似乎都不起作用。

<div id="images" style="float:right;position:relative" width="400" height="250">
    <img src="images/Next_Black_Arrow.png" style="height:25px;width25px;float: left;z-index=10;position:absolute;bottom:10px;left:250px;">
    <iframe SRC="testFiles/Categories of pattern matching characters.pdf#toolbar=0&navpanes=0&scrollbar=0" style="z-index=1;position:relative;"  width="400" height="250"></iframe>
    </div>

*Applogies 缺少单独的 css

虽然这有效，但不幸的是，如果您将 iframe 链接更改为 pdf，则不会。

请参阅 http://jsfiddle.net/vr4rX/4/

我认为这一定是土坯阅读器。确实可以解决一下。

原文

I am attempting to overlay an image above a pdf embedded in and iFrame.

This code results in the image falling behind the iFrame (tested by changing the bottom attribute to -10px and the bottom of the image becomes visable)

The only two methods I was aware of were using z-index, and the fact position absolute should place the object on top, but neither appear to be working.

<div id="images" style="float:right;position:relative" width="400" height="250">
    <img src="images/Next_Black_Arrow.png" style="height:25px;width25px;float: left;z-index=10;position:absolute;bottom:10px;left:250px;">
    <iframe SRC="testFiles/Categories of pattern matching characters.pdf#toolbar=0&navpanes=0&scrollbar=0" style="z-index=1;position:relative;"  width="400" height="250"></iframe>
    </div>

*Applogies for the lack of separated css

While that works, unfortunately it doesn't if you change the iframe link to a pdf.

See http://jsfiddle.net/vr4rX/4/

I think it must be a bug in the adobe reader. Could really do with a work around.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

仲春光 2024-11-14 16:54:26

看看我的解决方案： http://jsfiddle.net/vr4rX/1/

HTML:

<div id="images">
    <img src="http://t1.ftcdn.net/jpg/00/02/78/72/400_F_2787285_mlDf8ah974XHflVFrbQB3FM6Qxu1MT.jpg" />
    <iframe SRC="http://www.google.de"  width="400" height="250"></iframe>
</div>

CSS :

#images {
    float:right;
    width: 400px;
    height: 250px;
    position: relative;
    z-index: 1;
}

#images img {
   height:25px;
    width:25px;
    z-index=2;
    position:absolute;
    bottom:20px;
    right:20px;
}

have a look at my solution: http://jsfiddle.net/vr4rX/1/

HTML:

<div id="images">
    <img src="http://t1.ftcdn.net/jpg/00/02/78/72/400_F_2787285_mlDf8ah974XHflVFrbQB3FM6Qxu1MT.jpg" />
    <iframe SRC="http://www.google.de"  width="400" height="250"></iframe>
</div>

CSS:

#images {
    float:right;
    width: 400px;
    height: 250px;
    position: relative;
    z-index: 1;
}

#images img {
   height:25px;
    width:25px;
    z-index=2;
    position:absolute;
    bottom:20px;
    right:20px;
}

回复收藏 0 原文

~没有更多了~