2

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 ?

4

2 に答える 2

0

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%;
}
于 2013-01-29T08:28:14.037 に答える
0

それが私が考えていることです：

新しい HTML:

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

そして新しい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);
}

background: transparentまたは、変更したい場合opacity: 0.0; filter:alpha(opacity=0);

画像がある場合はそれで、iFrame がある場合はバグが発生します。フォトショップで完全に透明な画像を作成してみてください。そしてそのままカバーに。そうすれば、カバー要素に透明度または不透明度を追加する必要がなくなり、iframe がカバーされる可能性があります。これは、不透明度が 1 よりも低い場合にのみバグが発生するためです (聞いたことがあります)。そして、いくつかのz-indexを配置する必要があるかもしれません...試してみてください:)

于 2013-01-29T08:21:00.487 に答える