CSS3のrgba()をIE8に対応させる方法!

2015/05/15

css3-rgba-ie

こんにちは。
今回はCSS3のrgba()をIE8に対応させる方法!です。

以前、書いたCSSで背景だけ透過させる方法!をIE8に対応させる方法を紹介します。

CSS3のrgba()をIE8に対応させる方法!

まずは、CSS3のrgba()を記述します。

 

IE8に対応してませんので、IE用の記述をします。

 

グラデーションを記述するプロパティなので、開始(startColorstr)と終了(endColorstr)を設定する必要があります。
startColorstr=#80cccccc
最初の2桁上記で「80」の所は透明度を記述します。
最後の6桁は色を記述します。

 

rgbaとfilterの透明度の解釈が違いますので、下記を参考します。

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

 

IE9が二重に効いてしまうので、以下を記述します。

 

最終的に出来上がったのがこんな感じです!

 

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

 

いかがでしたか。ちょっとややこしいですが、もう少しの我慢です。
以上でCSS3のrgba()をIE8に対応させる方法!でした。

参考サイト:RGBa Browser Support | CSS-Tricks

topへ戻る