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

112

IE 8に含まれている要素に影響を与えずにdivの背景の不透明度を設定したいのですが、解決策があります。動的不透明度を使用しているため、1 x 1 .png画像を設定してその画像の不透明度を設定しても応答しません。それ

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

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

そして

rgba(0,0,0,0.3)

また。

css  internet-explorer-8  opacity 
— ゴビンド・マルビヤ
ソース
これはできません。プロパティの不透明度は、要素（他のHTML要素+テキスト）のすべてのコンテンツに影響します。しかし、なぜpngを使いたくないのか分かりません。あなたはCSSを変更するときに一緒に画像を変更するだけで済みます（私が思うに、あなたは管理者が切り替えることができる異なるCSSを持っているため）
— Elorfin
@Corum：あなたがどれだけ間違っているか（私と同じくらい）。可能です。このブログ投稿をチェックしてください。robertnyman.com/2010/01/11/…信じられないほど賢い。
— Robert Koritnik
ちょうどここに投稿された：< stackoverflow.com/a/11755175/1491212 >それは私が期待する助けになるかもしれません！
— Armel Larcier、2012

回答:

236

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を背景に使用-pie-backgroundするには、CSSに特定の宣言とPIE behaviorスタイルを追加する必要があるため、スタイルシートは次のようになります。

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

お役に立てば幸いです。

[編集]

他の人が述べたように、それが価値があるものについては、あなたfilterはgradientキーワードでIEのスタイルを使うことができます。CSS3Pieソリューションは、実際には同じ手法を舞台裏で使用しますが、IEのフィルターを直接操作する必要がなくなるため、スタイルシートがよりクリーンになります。（また、他の素晴らしい機能もたくさん追加しますが、この説明には関係ありません）

— スパッドリー
ソース
1
鮮やかさ！これはとても役に立ちました。
— ジョーダンスターク、
22

あなたがしなければならないのは与えることです

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

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

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/

— Sandeep
ソース
1
グラデーションは不透明度とどのような関係がありますか？：S
— ロバートコリトニック
@Robert Koritnik：より良い説明のために、この答えの私のバージョンを参照してください- stackoverflow.com/questions/5160419/...もここ：stackoverflow.com/questions/4788564/...
— thirtydot
@robert、これはrgbaと同じ効果をWebで利用できる唯一のIEフィルターであり、私はフィルターのエキスパートではありません。
— Sandeep
@Robertそれだけで動作します;）このリンクを参照してください -@sandeepフィルターコードを修正して必要な成分（透明な背景とhasLayout）を追加し、フィルターの順序を変更します..同意しない場合は自由にロールバックしてください;）
— clairesuzy
1
@sandeepフィルターはhasLayoutなしでは機能しません。コードに別のhasLayoutプロパティがあるかもしれません。私は片手で作業しています。手首を壊したため、応答が遅くなりましたが、次のjsfiddleは、2つの方法を比較するための条件付きコメント内の関連するIEコードです
— clairesuzy
8

opacity 親要素でそれをサブDOMツリー全体に設定します

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

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

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

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

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

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

ただし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つの要素は、兄弟やその他の点では関連していません。本来あるべき姿で表示されているだけです。どちらか一方。

— ロバートコリトニック
ソース
これは正解です
— 。bg
2

含まれる要素のZインデックスを高く設定してみてください。

— maple_shaft
ソース
1

このアプローチについて：

	<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>
スニペットを展開

— ダニエル
ソース
0

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

#alpha {
 background-color: #fff;
 opacity: 0.8;
 filter: alpha(opacity=80);
}
— ミゲルエンジェルデラマルタ
ソース
2
コンテンツにも影響しています！
— Germa Vinsmoke
0

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

— アーミン・ファラー・アルサーダ
ソース
0

RGBAを使用するか、16進コードの場合はRGBAに変更します。presodu要素の css を実行する必要はありません。

function hexaChangeRGB(hex, alpha) {
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    if (alpha) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

hexaChangeRGB('#FF0000', 0.2);

css ---------

background-color: #fff;
opacity: 0.8;

または

mycolor = hexaChangeRGB('#FF0000', 0.2);
document.getElementById("myP").style.background-color = mycolor;
— ガジェンダー・シン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.