web-dev-qa-db-ja.com

IE 8に含まれる要素に影響を与えないdivの背景の不透明度？

IE 8.に含まれる要素に影響を与えずにdivの背景の不透明度を設定したい。不透明度と色の管理者はそれを変更できます

私はそれを使用しましたが、IE 8では動作しませんでした

#alpha {
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

そして

rgba(0,0,0,0.3)

また。

cssinternet-explorer-8opacity
101
Govind KamalaPrakash Malviya

opacityスタイルは、要素全体とその中のすべてに影響します。これに対する正しい答えは、代わりにrgbaの背景色を使用することです。

CSSはかなり単純です。

.myelement {
    background: rgba(200, 54, 54, 0.5);
}

...最初の3つの数値は背景色の赤、緑、青の値で、4番目は「アルファ」チャンネル値で​​、opacity値と同じように機能します。

詳細については、このページを参照してください： http://css-tricks.com/rgba-browser-support/

欠点は、IE8以前では機能しないことです。上記でリンクしたページには、動作しない他のブラウザもいくつかリストされていますが、それらはすべて非常に古いものです。 IE6/7/8を除く現在使用中のすべてのブラウザは、rgbaカラーで動作します。

良いニュースは、 CSS3Pie と呼ばれるハックを使用して、IEをこれで動作させることもできます。 CSS3Pieは、rgbaの背景色など、IEの古いバージョンに多くの最新のCSS3機能を追加します。

CSS3Pieを背景に使用するには、CSSに特定の-pie-background宣言とPIE behaviorスタイルを追加する必要があります。これにより、スタイルシートは次のようになります。

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background:  rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}

お役に立てば幸いです。

[編集]

他の人が述べたように、それが価値があるものとして、IEのfilterスタイルをgradientキーワードと共に使用できます。 CSS3Pieソリューションは、実際にこの同じテクニックを舞台裏で使用しますが、IEのフィルターを直接いじる必要がなくなるため、スタイルシートはずっときれいになります。 （また、他の多くのNice機能も追加しますが、この議論には関係ありません）

217
Spudley

あなたがしているのは与えることです

background: rgba(0,0,0,0.3)

＆IE forこのフィルターを使用

background: transparent;
zoom: 1;    
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */

ここからrgbaフィルターを生成できます http://kimili.com/journal/rgba-hsla-css-generator-for-internet-Explorer/

21
sandeep

親要素のopacityは、サブDOMツリー全体に対して設定します

子孫にもカスケードしない特定の要素の不透明度を実際に設定することはできません。それはCSS opacityの動作方法ではありません。

あなたができることは、1つのコンテナに2つの兄弟要素を持ち、透明なものの位置を設定することです：

<div id="container">
    <div id="transparent"></div>
    <div id="content"></div>
</div>

次に、透明なposition: absolute/relativeを設定して、コンテンツの兄弟がその上にレンダリングされるようにする必要があります。

rgbaは、色付きの背景の背景透明化を行うことができます

要素のbackground-colorのrgba色設定はもちろん機能しますが、背景としてのみ色を使用するように制限します。怖い画像はありません。 rgbaでグラデーションの停止色を指定した場合でも、もちろんCSS3グラデーションを使用できます。それも機能します。

ただし、rgbaは必要なブラウザでサポートされていない可能性があることに注意してください。

アラートフリーモーダルダイアログ機能

しかし、ページ全体を何らかの方法でマスキングしたい場合は、通常、次のスタイルのセットで個別のdivを追加することでこれを行います。

position: fixed;
width: 100%;
height: 100%;
z-index: 1000; /* some high enough value so it will render on top */
opacity: .5;
filter: alpha(opacity=50);

次に、コンテンツを表示すると、z-indexが高くなります。しかし、これらの2つの要素は、兄弟などの点では関連していません。あるべきように表示されます。上下に1つ。

6
Robert Koritnik

含まれている要素のz-indexを高く設定してみてください。

2
maple_shaft

このアプローチはどうですか：

    <head>
        <style type="text/css">
                div.gradient {
                        color: #000000;
                        width: 800px;
                        height: 200px;
                }
                div.gradient:after {
                        background: url(SOME_BACKGROUND);
                        background-size: cover;
                        content:'';
                        position:absolute;
                        top:0;
                        left:0;
                        width:inherit;
                        height:inherit;
                        opacity:0.1;
                }
        </style>
        </head>
        <body>
                <div class="gradient">Text</div>
        </body>
1
Daniel

もっと簡単な答えがあるかもしれません。background-color：#fff;のように、好きな背景色をコードに追加してみてください

#alpha {
 background-color: #fff;
 opacity: 0.8;
 filter: alpha(opacity=80);
}
1
Miguel Angel de la Marta

絶対位置以外の位置で不透明度機能を使用すると、子div全体に影響します。そのため、divを相互に配置せず、divの絶対位置を使用しないようにする別の方法です。上部divに背景色を使用しないでください。

0
Armin Farah Al-Saada