IE 8で動作していないRGBAのCSSバックグラウンド不透明度

https://stackoverflow.com/questions/3975688

09-10-2019
|

質問

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

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

Firefoxでは正常に動作していますが、IE 8ではうまく機能していません。どうすれば機能させますか？

解決

1x1ピクセル（Thirtydotに感謝）を超えるPNGを作成し、背景の透明度に一致します。

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

他のヒント

IEでRGBAとHSLAの背景をシミュレートするには、同じ開始色とエンド色で勾配フィルターを使用できます（Alphaチャネルは、16進数の最初のペアです）

background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */

このページには、アルファ透明の背景を生成するのに役立つツールがあるため、これは最高だと思います。

http://hammerspace.co.uk/2011/10/cross-browser-alpha-transparent-background-css

#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');
});

遅くても、私は今日それを使用しなければなりませんでした、そして非常に便利なPHPスクリプトを見つけましたこここれにより、RGBAの仕組みと同様に、PNGファイルを動的に作成できます。

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コードがCSSにありますが、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の修正が必要な場合を除き、それ自体が問題を引き起こす可能性があります。

私はパーティーに遅れていますが、これを見つけた他の誰にとっても - この記事は非常に便利です：http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

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

使用する rgba IEの背景フォールバックがあります。

フィルタープロパティを使用する必要があります。それは使用します 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`

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

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

乾杯

このソリューションは本当に機能します、試してみてください。 IE8でテストされました

.dash-overlay{ 
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; 
}

Internet Explorer 8は代わりにRGBをサポートし、次にuが不透明度を与える必要があるため、最初にRGBとしてバックガウンドを与える必要があります。 filter:alpha(opacity=50);

background:rgb(0,0,0);
filter:alpha(opacity=50);

これは、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;
}

私がこれまでに見つけた最良の解決策は、彼の中でデビッド・J・マーランドによって提案されたものですブログ, 、古いブラウザの不透明度をサポートする（すなわち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;
}

たくさん検索した後、私は私のケースで動作している次のソリューションを見つけました。

.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からArgb（IES）を計算するには、オンラインツールを使用できます。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow

IE 8で動作していないRGBAのCSSバックグラウンド不透明度

計算方法 ARGB にとって RGBA

計算方法 `ARGB` にとって `RGBA`