iframe 中 pdf 上的透明 iframe

发布于 2024-07-25 02:35:42 字数 1111 浏览 3 评论 0原文

我发现了将 iframe 放在 iframe 之上的技术，以解决浏览器使用 iframe 时遇到的 z-index 问题。

我现在面临的问题是我需要与 PDF 重叠（加载到 iframe 中）的 iframe 是透明的。这可能吗？？

我想这样做的原因是我可以在 PDF 的顶部有一个透明的 png 下面

是一些代码，以便您可以看到我的问题 - 您将在 PDF 的左上角看到一个白色的方块。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <style type="text/css">
        #contentFrame
        {
            height:500px;
            width:990px;
        }       

        #overlapFrame
        {
            width:100px;
            height:100px;
            position:absolute;
            left:0;
            top:0; 
            background: transparent;           
        }

    </style>

</head>
<body>
    <iframe src="http://www.education.gov.yk.ca/pdf/pdf-test.pdf" id="contentFrame" frameborder="0"></iframe>
    <iframe id="overlapFrame" frameborder="0" scrolling="no"></iframe>
</body>
</html>

原文

I have found the technique of putting iframes on top of an iframes to get round the z-index problem browsers have with iframes.

The problem I am facing now is I need the the iframe that overlaps a PDF (loaded into an iframe) to be transparent. Is this possible??

The reason I want to do this is so I can have a transparent png over the top of the PDF

Below is some code so that you can see my problem - you will see a white square in the top left hand corner of the PDF.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <style type="text/css">
        #contentFrame
        {
            height:500px;
            width:990px;
        }       

        #overlapFrame
        {
            width:100px;
            height:100px;
            position:absolute;
            left:0;
            top:0; 
            background: transparent;           
        }

    </style>

</head>
<body>
    <iframe src="http://www.education.gov.yk.ca/pdf/pdf-test.pdf" id="contentFrame" frameborder="0"></iframe>
    <iframe id="overlapFrame" frameborder="0" scrolling="no"></iframe>
</body>
</html>

分享到QQ

分享到微博