HOME > > > 背景をrgbaで設定した時にIE8以下で透過する方法

背景をrgbaで設定した時にIE8以下で透過する方法

rgbaとfileter

rgbaで背景を設定するとIE8以下では透過しない?

背景をrgbaで設定すると透過しやすいです。
でもIE8以下だと透過せず背景色が無くなって表示されてしまいます。
ではIE8以下でrgbaを使って背景を透過するにはどうしたら良いのでしょうか。

rgbaの設定方法はこちら

rgbaと別にCSSを設定する

以下は背景の色を白とした時の透過の設定です。
「background」はIE9以上、「filter」はIE8以下の設定です。


background: rgba(255,255,255,0.8);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff);/*IE8以下用*/

filterの設定説明

filterはbackgroundtとはちょっと設定が違うので引数をご説明。

Enabled=0

Enabled=0か1で表記します。
1グラデーション機能の有効化。何も設定しない場合は有効化されます。

GradientType=0

GradientType=0か1で表記します。
グラデーションの方向の設定です。
0は縦方向、1は横方向。

StartColorStr=#00000000

GradientType=#00000000~#FFFFFFFFで表記します。
グラデーションの開始の透明度+色をaRGB形式で指定します。
ここがちょっとややこしいのですが、透明度は最初の2文字、RGBは後半6文字です。
例えば・・・
「#99ffffff」はrgbaでいう所の「255,255,255,0.9」という事になります。
99はalpha(0.9)、ffffffはRGB(白)という事になります。

EndColorStr=#00000000

EndColorStr=#00000000~#FFFFFFFFで表記します。
グラデーションの終了の透明度と色になります。
設定は上記開始の設定と同じです。

rgbaとfilterで同じ数値だと透明度が違う

rgbaとfilterで同じ透明度の数値(例えば「rgbaは0.8」で「filterは88」)だとfilgerの方が明らかに薄いです。 数値で同じにはせず調整しましょう。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2014.08.12