css - How to put a transparent image over a div containing a pdf in iframe

Question

I have a Div consists of an iframe to display a pdf. I just want to safe my pdf by putting up a transparent image over the iframe. So that nobody can download the pdf. I am using following code :

<div id="tobecovered">
    <p>your content...</p>
    <img src="./img/transparent.png" class="cover" />
</div>

div#tobecovered{
    position: relative;
}
div#tobecovered img.cover{
    position: absolute;
    /* position in top left of #tobecovered */
    top: 0; /* top of #tobecovered */
    left: 0; /* left of #tobecovered */
}

Its working fine in Chrome but not working in Mozilla Firefox. Can anybody help ?

Answer 1

That is what I think of:

The new HTML:

<div id="tobecovered">
    <p>your content...</p>
    <div class="cover"></div> <!--for example-->
</div>

And the new CSS:

div#tobecovered{
    position: relative;
}
div#tobecovered div.cover{
    background: url(images/./img/transparent.png) no-repeat 0 0;
    width: 100px; /*for example*/
    height: 100px; /*for example*/
    position: absolute;
    /* position in top left of #tobecovered */
    top: 0; /* top of #tobecovered */
    left: 0; /* left of #tobecovered */

    opacity: 0.0; 
    filter:alpha(opacity=0);
}

Or if you want change background: transparent with opacity: 0.0; filter:alpha(opacity=0);

Thats if you have image, and when you have iFrame it will be buggy. So try to create completely transparent image in photoshop. And just put it for a cover. That way you don't need to add transparency or opacity to the cover element and it might cover the iframe, because it does the bug only if there is lower opacity than 1. (that I've heard). and may be you have to put some z-index ... try it :)

Answer 2

给max-width; max-height图像 100%：

div#tobecovered img.cover{
    position: absolute;
    /* position in top left of #tobecovered */
    top: 0; /* top of #tobecovered */
    left: 0; /* left of #tobecovered */
    max-width: 100%;
    max-height: 100%;
}