ちょっと上手くいって感動したので書きます。今回も番外編で、小ネタです。
ブログのデザインを変更していると、ある要素を透明にしたい時がある。透明にするには、CSSでは次のように設定する。
要素を透明化する CSS プロパティ
CSS3 で入ってきたプロパティのようだが、opacity を設定すれば透明化できる。
opacity:0.7;0 が透明で 1 が不透明、0～1 の値を指定する。
これで Firefox や Chrome では透明化できたのだが、IEでは出来ない。ネットで調べると、IE では Opacity は使えず、filter を使うそうだ。
filter: alpha(opacity=70); /* ie 6 7 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */IEの透明度は0～100の％で指定する。
この他、Firefox や Safari の古いバージョン用の記述を加えて、最終的に次のような指定になった。
opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */IE6 以前の記述方法もあったが、これ以上は良いだろう。
参考
Coder's Note - 指定した要素を半透明にできるopacity（IEでも使える）
codecanyou - Crossbrowser Opacity
IE でテストしてみる・・・・？・・・・が、なぜか透明化しない。
IE で filter/opacity を動かすためには
さらにネットで調べると IE で filter/opacity のプロパティを動かすためには、width や heigth などの位置情報が無いと動かない。つまり、currentStyle.hasLayout が False だと透明にならないそうだ。これを簡単に動かすには、無害な設定の zoom:1 を加えると良いようだ。
opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1;参考
Joseph Scott - CSS Opacity in Internet Explorer (IE)
Enjoy*Study - IEにおいてfilter:alpha(opacity)を設定しても、currentStyle.hasLayout=falseだとが透明にならない。
試してみると・・・、透明化した！！。ここまで書かないと動かないなんて、クロスブラウザ設定は大変だな～。でも、こんなことで悩むのはヤダな。
５年くらい前の情報を元にしたネタで、申し訳ありません。