覆盖嵌入式pdf以上的图像 [英] Overlay Image above Embedded pdf
问题描述
我正在尝试将图像覆盖在嵌入在iFrame中的pdf上方。
I am attempting to overlay an image above a pdf embedded in and iFrame.
此代码导致图像落后于iFrame(通过将底部属性更改为-10px进行测试,图像底部变得可见)
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)
我所知道的唯一两种方法是使用z-index,而且绝对的事实位置应该将对象置于顶部,但似乎都不起作用。
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>
*缺少分离css的Applog
*Applogies for the lack of separated css
虽然可行,但遗憾的是,如果您将iframe链接更改为pdf,则不会。
While that works, unfortunately it doesn't if you change the iframe link to a pdf.
请参阅 http://jsfiddle.net/vr4rX/ 4 /
我认为它一定是adobe reader中的一个错误。可以真正解决这个问题。
I think it must be a bug in the adobe reader. Could really do with a work around.
推荐答案
看看我的解决方案: 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;
}
这篇关于覆盖嵌入式pdf以上的图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!