112

の背景の不透明度にこの CSS を使用しています<div>。

background: rgba(255, 255, 255, 0.3);

Firefox では問題なく動作しますが、IE 8 では動作しません。どうすれば動作させられますか?

4

15 に答える 15

241

IE で RGBA と HSLA の背景をシミュレートするには、開始色と終了色が同じグラデーション フィルターを使用できます (アルファ チャネルは HEX の値の最初のペアです)。

background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */
于 2010-10-20T11:25:29.593 に答える
71

1x1 ピクセルよりも大きく (thirtydot に感謝)、背景の透明度と一致する png を作成します。

編集: IE6+ サポートにフォールバックするには、png に bkgd チャンクを指定できます。これは、サポートされていない場合に真のアルファ透明度を置き換える色です。たとえば、gimpで修正できます。

于 2010-10-20T07:44:24.447 に答える
9

透明な png 画像は IE 6 では機能しません。代替手段は次のとおりです。

CSSで：

.transparent {

    /* works for IE 5+. */
    filter:alpha(opacity=30); 

    /* works for IE 8. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

    /* works for old school versions of the Mozilla browsers like Netscape Navigator. */
    -moz-opacity:0.3; 

    /* This is for old versions of Safari (1.x) with KHTML rendering engine */
    -khtml-opacity: 0.3; 

    /* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */  
    opacity: 0.3; 
}

または単にjQueryでそれを行います：

// a crossbrowser solution
$(document).ready(function(){ 
    $(".transparent").css('opacity','.3');
});
于 2010-10-20T09:13:23.860 に答える
7

遅くなりましたが、今日それを使用する必要があり、rgba の動作と同じように、png ファイルを動的に作成できる非常に便利な php スクリプトを見つけました。

background: url(rgba.php?r=255&g=100&b=0&a=50) repeat;
background: rgba(255,100,0,0.5);

スクリプトはここからダウンロードできます: http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip

すべての人にとって完璧なソリューションではないことはわかっていますが、多くの時間を節約し、問題なく動作するため、場合によっては検討する価値があります。それが誰かを助けることを願っています!

于 2013-03-19T16:48:23.353 に答える
5

css を使用して不透明度を変更します。IE に対処するには、次のようなものが必要です。

.opaque {
    opacity : 0.3;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
}

しかし、これに関する唯一の問題は、コンテナ内のすべてが 0.3 の不透明度になることです。したがって、HTML を変更して、コンテンツを保持する透明なコンテナー内ではなく、別のコンテナーを持つようにする必要があります。

それ以外の場合は、png 手法が機能します。IE6 の修正が必要な場合を除いて、それ自体が問題を引き起こす可能性があります。

于 2010-10-20T08:19:23.090 に答える
4

私はパーティーに遅れましたが、これを見つけた他の人にとっては、この記事は非常に役に立ちます: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

グラデーションフィルターを使用して、単色で透明な色を表示します。

于 2013-01-14T22:08:15.360 に答える
2

IE でバックグラウンドを使用するrgbaには、フォールバックがあります。

filter プロパティを使用する必要があります。使用するARGB

    background:none;
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
    zoom: 1;

これはフォールバックです rgba(255, 255, 255, 0.2)

#33ffffffあなたに合わせて変更してください。

計算ARGB方法RGBA

于 2014-05-21T08:08:09.383 に答える
1

これはIE8の問題を解決するのに役立ちました：

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";

乾杯

于 2013-06-10T17:57:40.697 に答える
0

Internet Explorer 8はrgbaの代わりにrgbをサポートするため、最初に背景をrgbとして指定する必要があり、次に不透明度を次のように指定する必要がありますfilter:alpha(opacity=50);

background:rgb(0,0,0);
filter:alpha(opacity=50);
于 2014-04-09T05:22:56.843 に答える
0

これは、IE x を含むほとんどのブラウザーの透明性ソリューションです。

.transparent {
    /* Required for IE 5, 6, 7 */
    /* ...or something to trigger hasLayout, like zoom: 1; */
    width: 100%; 

    /* Theoretically for IE 8 & 9 (more valid) */   
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=50);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.5;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.5;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.5;
}
于 2015-01-01T13:15:33.227 に答える
0

私がこれまでに見つけた最良の解決策は、David J Marland が彼のブログで提案した、古いブラウザー (IE 6+) で不透明度をサポートするものです。

.alpha30{
    background:rgb(255,0,0); /* Fallback for web browsers that don't support RGBa nor filter */ 
    background: transparent\9; /* backslash 9 hack to prevent IE 8 from falling into the fallback */
    background:rgba(255,0,0,0.3); /* RGBa declaration for browsers that support it */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000); /* needed for IE 6-8 */
    zoom: 1; /* needed for IE 6-8 */
}

/* 
 * CSS3 selector (not supported by IE 6 to IE 8),
 * to avoid IE more recent versions to apply opacity twice
 * (once with rgba and once with filter)
 */
.alpha30:nth-child(n) {
    filter: none;
}
于 2015-03-03T17:05:15.393 に答える