#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. OtherTips › translucent-IE8

Translucent color for IE8

半透明・透過をIE8に適応させる

対象の要素を半透明にしたい場合、opacityプロパティやRGBAカラーモデルを使う方法が有ります。
しかし、IE8はopacityもrgba()も対応していません。IE8に対応した、背景色の透明度を指定する方法をご紹介します。

opacityプロパティで半透明

opacityプロパティはIE9からのサポートなので、それ以前のバージョンに対応するにはベンダープレフィックスが必要です。全ブラウザ対応にはopacityの部分に下記を記述して下さい。(透過率50%の場合)

   filter:alpha(opacity=50); /* IE 6,7*/
   -ms-filter: "alpha(opacity=50)"; /* IE 8,9 */
   -moz-opacity:0.5; /* FF , Netscape */
   -khtml-opacity: 0.5; /* Safari 1.x */
   opacity:0.5;
   zoom: 1; /* IE */

/* IEでopacityを適応する為に、currentStyle.hasLayoutがFalseだと透明にならないので「zoom:1;」を加える */
.sample1{
   width: 180px;
   height: auto;
   margin: 0 auto; /* 左右中央寄せ */
   background-color: #ffffff; /* 透過したい背景色 */
   color: #000000; /* 表示する文字色 */
   border: 1px solid #3486b1; /* 枠線 */
   filter: alpha(opacity=50); /* IE6,7*/
   -ms-filter: "alpha(opacity=50)"; /* IE8,9 */
   -moz-opacity: 0.5; /* FF , Netscape */
   -khtml-opacity: 0.5; /* Safari 1.x */
   opacity: 0.5;
   zoom: 1; /* IE */
}

/* IE9に両方のプロパティがかかっているのでIE9のみfilterがかからないように以下を記述 */
.sample1:not(:target){
    filter: none;
}

例1:透過度50%のdivボックスです。IE8以下・他古いブラウザでも表示。

sample

:not(:target)のターゲット疑似クラスは、IE9とその他のモダンブラウザ向けのハックなので、これを利用してfilterをnoneに上書きします。

参考:Web関連あれこれ - opacityを全ブラウザに対応させるcss

RGBAカラーモデルで半透明

RGBAカラーモデルはIE9からのサポートなので、それ以前のバージョンに対応するにはIE独自のフィルター『filter』を利用して半透明にすることが可能です。
グラデーションを表示するプロパティの、開始「startColorstr」と終了「endColorstr」を同じ色にして透明度を指定します。

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#803366ff,endColorstr=#803366ff);
赤文字の部分に透明度、緑文字の部分に16進数のカラーコードを記述

.sample2{
   width: 180px;
   height: auto;
   margin: 0 auto; /* 左右中央寄せ */
   background-color: rgba(255,255,255,0.5); /* IE9以上と他ブラウザ */
   filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr=#80ffffff,endColorstr=#80ffffff); /* IE8,9用 */
   color: #000000;
   border: 1px solid #3486b1;
}

/* IE9に両方のプロパティがかかっているのでIE9のみfilterがかからないように以下を記述 */
.sample2:not(:target){
    filter: none;
}

例1:透過度50%のdivボックスです。IE8以下・他古いブラウザでも表示。

sample

:not(:target)のターゲット疑似クラスは、IE9とその他のモダンブラウザ向けのハックなので、これを利用してfilterをnoneに上書きします。

rgbaとfilterの透明度の解釈が違いますので、透明度の部分は下記の表を参照

透明度 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
00 1A 33 4D 66 80 99 B3 CC E6 FF
透明度 5% 15% 25% 35% 45% 55% 65% 75% 85% 95% -
0D 26 40 59 73 8C A6 BF D9 F2 -

RGBAについてと数値取得ツールがDesignTipsの『RGBA変換ツール』のページに有るのでご利用下さい。

参考:Design Magazine - CSS3のrgba()をIE8に対応させる方法!