こんにちは。
今回はCSS3のrgba()をIE8に対応させる方法！です。
CSSで背景だけ透過させる方法をIE8に対応させる方法を紹介します。
CSS3のrgba()をIE8に対応させる方法！
まずは、CSS3のrgba()を記述します。
1 2 3 | div { background: rgba(204,204,204, 0.5); } |
IE8に対応してませんので、IE用の記述をします。
1 2 3 | div{ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80cccccc,endColorstr=#80cccccc); } |
グラデーションを記述するプロパティなので、開始（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が二重に効いてしまうので、以下を記述します。
1 2 3 | div:not(:target){ filter: none; } |
最終的に出来上がったのがこんな感じです！
1 2 3 4 5 6 7 | div { background: rgba(204,204,204, 0.5); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80cccccc,endColorstr=#80cccccc); } div:not(:target){ filter: none; } |
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
ちょっとややこしいですが、もう少しの我慢です。
以上でCSS3のrgba()をIE8に対応させる方法！でした。
