回答:
1x1ピクセルより大きく（thirtydotに感謝）、背景の透明度に一致するpngを作成します。
編集：IE6 +サポートにフォールバックするには、pngにbkgdチャンクを指定できます。これは、サポートされていない場合に真のアルファ透明度を置き換える色です。gimpなどで修正できます。
1x1：stackoverflow.com/questions/7764751/...
IEでRGBAとHSLAの背景をシミュレートするには、同じ開始色と終了色のグラデーションフィルターを使用できます（アルファチャネルはHEXの値の最初のペアです）
background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */このページにはアルファ透明な背景を生成するのに役立つツールがあるので、これが最高だと思います。
「クロスブラウザーアルファ透明背景CSS（rgba）」（*現在、archive.orgにリンクされています）
#div {
background:rgb(255,0,0);
background: transparent\9;
background:rgba(255,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000);
zoom: 1;
}透明な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');
});遅くとも、私は今日それを使用する必要があり、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
私はそれが誰にとっても完璧な解決策ではないかもしれないことを知っていますが、それは多くの時間を節約し、完璧に機能するので、いくつかのケースでは検討する価値があります。それが誰かを助けることを願っています！
rgbaか？rgba.phpのURLは、サポートしていないブラウザからのみ要求されますか？または、常にすべてのユーザーから要求され、単に表示されませんか？
ほとんどすべてのブラウザーがCSSでRGBaコードをサポートしていますが、IE8以下のレベルのみがRGBa cssコードをサポートしていません。これが解決策です。ソリューションの場合、このコードに従う必要があります。そうでない場合は、シーケンスを使用することをお勧めします。そうしないと、希望どおりの完璧な出力が得られません。このコードは私が使用しており、ほとんど完璧です。完璧ならコメントしてください。
.class
{
/* Web browsers that does not support RGBa */
background: rgb(0, 0, 0);
/* IE9/FF/chrome/safari supported */
background: rgba(0, 0, 0, 0.6);
/* IE 8 suppoerted */
/* Here some time problem for Hover than you can use background color/image */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)";
/* Below IE7 supported */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000);
}cssを使用して不透明度を変更します。IEに対処するには、次のようなものが必要です。
.opaque {
opacity : 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
}ただし、これの唯一の問題は、コンテナ内のすべての要素が0.3の不透明度になることです。したがって、HTMLを変更して、コンテンツを保持する別のコンテナーを、透明なコンテナー内ではなく、作成する必要があります。
それ以外の場合は、png手法が機能します。IE6の修正が必要な場合を除いて、それ自体が問題を引き起こす可能性があります。
rgba()バージョン3までサポートせず、Operaはバージョン10までサポートしませんでした
私はパーティーに遅れましたが、これを見つけた他の誰にとっても-この記事は非常に役に立ちます：http : //kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
グラデーションフィルターを使用して、単色であるが透明な色を表示します。
rgbaIEでバックグラウンドを使用するには、フォールバックがあります。
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これは、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;
}私がこれまでに見つけた最良の解決策は、古いブラウザ（IE 6+）の不透明度をサポートするために、David J Marlandのブログで提案された解決策です。
.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;
}多くを検索した後、私は私のケースで機能している次の解決策を見つけました：
.opacity_30{
background:rgb(255,255,255); /* Fallback for web browsers that don't support neither RGBa nor filter */
background: transparent\9; /* Backslash 9 hack to prevent IE 8 from falling into the fallback */
background:rgba(255,255,255,0.3); /* RGBa declaration for modern browsers */
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* IE 8 suppoerted; Sometimes Hover issues may occur, then we can use transparent repeating background image :( */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* needed for IE 6-7 */
zoom: 1; /* Hack needed for IE 6-8 */
}
/* To avoid IE more recent versions to apply opacity twice (once with rgba and once with filter), we need the following CSS3 selector hack (not supported by IE 6-8) */
.opacity_30:nth-child(n) {
filter: none;
}*重要： RGBAからIEのARGBを計算するには、オンラインツールを使用できます。
rgba()色の値は、IE 8でサポートされていない