7

iframe の上に配置された要素 (バー) があります。その要素に不透明度を設定すると、そのアイテムの z-index が iframe よりも大きい場合でも、要素は iframe の下に留まります。

ただし、その要素と iframe の周りにコンテナー (foo) を作成し、そこに不透明度を設定すると、(bar) 要素は意図したように iframe の前に留まります。

CSS:

#bar {
    width:100px; 
    opacity:0.5;
    height: 150px; 
    position:relative; 
    top:100px; 
    z-index:2; 
    background:red
}

#foo {
  /* opacity:0.5; */ 
}

HTML

<div id="foo">
    <div id="bar">
        <ul>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>

    <iframe src="http://www.adelaide.edu.au/myuni/tutorials/docdesign/guides/docDesignGuide_KeepPDFsmall.pdf" width="200px" height="200px" frameborder="0" style="z-index:-1"></iframe>
</div>

そのコンテナを作成すると問題は解決しますが、現在のマークアップでは許可されていないため、それを行うことはできません。バー要素にとどまるには不透明度が必要です。

これは Firefox でのみ発生し、iframe のコンテンツは .pdf ファイルです。

不透明度の設定を維持しながら、バー要素を iframe の上に置くにはどうすればよいですか?

ここでフィドル

アップデート：

この問題は、iframe の Web ページではなく pdf ファイルを入手しているという事実に関連しているようです。

更新されたフィドル

前もって感謝します

4

3 に答える 3

0

それらのリンクを見てください。私はそれがあなたの問題の議論だと思います：

この問題に対するStackOverflowとAdobeの声明

これを議論するためのもう1つのテーマを見つけました。あなたの場合として、彼らはpdfiframeを使用します：

ここにリンク

于 2013-01-28T10:32:48.003 に答える
0

私が理解していることから、テキストを画像の上に透明にしたいですか？私の古いサイトの表紙の 1 つである chadwaddell.info で、このようなことをしました。コンテナー div を作成し、画像を独自の div に配置し、テキストを独自の div に配置しました。コンテナの位置を相対位置に設定し、画像の位置を絶対位置に設定します。また、rgba を使用してこのような不透明度を設定します

#bar {
width:100px; 
opacity:0.5;
height: 150px; 
position:relative; 
top:100px;  
color: rgba(3,3,3,0.5)
background:rgba(255,0,0,0.5)
}

私はあなたのフィドルに行き、私が言おうとしていたことをしました。これが役立つことを願っています http://jsfiddle.net/N9cZp/23/

于 2013-03-05T01:40:25.713 に答える