0

そのため、divまたはiframe内のスライドショーがページcssから透明度を継承しないようにするために、数え切れないほどの時間を費やしてきました。私はz-index、絶対/相対ポジショニングを使用しようとしました...すべて無駄になりません。私の調査から理解したところによると、Firefoxのiframeはデフォルトで親から継承されますが、IEは継承せず、デフォルトで白い背景を使用します。そのため、divを使用するように切り替えましたが、同じ結果になりました。私はすべての初期テストにFirefoxを使用しています。何が起こっているのかというと、スライドショーはcssから透明度を継承しているので、スライドショーを通して背景画像を見ることができます。

関連するコードは次のとおりです。

CSS

* { margin: 0; padding: 0; }

html { 
    background: url(blue_water.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#Slideshow1 img {
    width:379px;
    z-index:12;
 }

#page-wrap {
    width: 660px;
    margin: 50px auto;
    padding: 15px; 
    background: white;
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */

    -moz-box-shadow: 0 0 20px black;
    -webkit-box-shadow: 0 0 20px black;
    box-shadow: 0 0 20px black;
}

HTML

<div id="slideshow">
    <div style="float:right">
        <div style="margin: 0 auto; width: 400px; height: 310px; overflow:auto;">
            <object type="text/html" data="slideshow.html" style="width:100%; height:300px; z-index:12; margin:0;"></object>
        </div>
    </div>
</div>​
4

2 に答える 2

1

これはすべてのブラウザで問題を解決するわけではありませんが、私が行うことは、要素全体ではなく、背景色自体をフェードすることです。

      background: none repeat scroll 0 0 rgba(18, 18, 18, 0.7);

最後の値は、0.1から1.0の範囲の不透明度です。

于 2012-06-12T23:46:48.853 に答える
1

最初に質問に答えてください。スライドショーdivをページラップdivの前に配置し、スライドショーの絶対位置を使用して必要な場所に移動してみませんか。あれは：

<div class="relative position">
    <div class="slideshow"> <!--absolute position -->
    </div> <!-- end slideshow -->

    <div class="page-wrap">
        content
    </div> <!-- end page-wrap -->
</div> <!-- end relative position div -->

'相対位置'コンテナdivをページラップdivと同じ幅、高さ、位置にすると、実際のページラップdivにあるかのように絶対divを移動できるはずです。絶対divを他の何よりもzインデックス化する必要があるかもしれません。

さらに、これが実際のコードである場合、内部スタイルまたはインラインスタイルは使用しません。すべてのCSSを外部ファイルに入れます。より速く、より理解しやすくなります。

于 2012-06-12T23:56:52.200 に答える