半透明フィルター

あるブロックを半透明にしたい場合、IE独自仕様のアルファフィルターと、CSS3に入っているフィルターを両方指定すればできます。
現在のW3CのCSS Varidater はCSS2で検査されていますが、主なブラウザはすでにCSS3に対応しているので、CSS2に規定されていないopacityを指定しても読み取ってくれる。
例： background-color: #FFF;
      filter:alpha(opacity=75);
      opacity:0.75;
IEのアルファフィルターは、真ん中のfilter:alpha(opacity=75);の部分で、これは不透明度75％になります。

IEの半透明フィルターが半透明にならない

他のブラウザのCSS3への対応のおかげで、レイヤーを半透明にするのも楽になりましたが、例によってIEでは、これだけでは半透明になってくれません。
hasLayoutの値をtrueにする指定を一緒に書き込んでやらなくちゃいけない。

hasLayioutについては、colissさんのサイトで説明されていますのでそちらで見てください。
colissさんの受け売りではありますが、どのような指定をすればいいかを下に書いてあります。

• display:inline-block;
• height:実際の値;
• width:実際の値;
• float:left または right;
• position:absolute;
• writing-mode:tb-rl;
• zoom:任意の値;

高さや幅が指定できない場合、この中で一番使いやすいのはzoomです。
なので、IE対策ではよくzoom:1 が使われます。
半透明フィルターも、このzoom:1 を一緒に指定してやれば、ぱっと半透明になってくれます。

上にくる画像が透明になってしまう

しかし、半透明にしたブロックをよく見ると、その上にくる画像も半透明になってしまっています。
透明度が高ければ高いほど、画像も透き通ってしまって、これでは見づらいこと甚だしい。
これを回避する方法を今まで知らなかったのですが、偶然見つけました。

IEは問題解決
半透明にしたレイヤー（親要素）の上にくる次のレイヤー（子要素）のCSSの中に、文字や画像を不透明にする指定を書き込みます。

position:relative;

これで、半透明になったブロックの上に文字や画像が来ても、透き通らずにきれいに表示されます。
ただ、これはIEだけに有効のようで、CSS3の半透明フィルターには効きませんでした。
また解決策をどこかで見つけたら、メモすることにします。

IE以外の半透明フィルターで出た問題

プラグイン全体ではなく、それぞれのブロックに半透明フィルターをかけたところ、大きな問題が出ました。
それぞれのプラグインの中に納まるものはOKなのですが、カウンターで撃沈してしまった。
マウスをカウンターの上に持っていくと下にレイヤーが出てきますが、このレイヤーが次のプラグインの下に潜り込んでしまう。
試しに上のpositionを指定してみたり、レイヤーの順番を変えるz-indexを指定してみたけど、どれも効果はなし。
う～ん、と唸りながらあちこちを探し回ったけれど、解決策にはぶち当たらなかった。

仕方ないので、この問題の解決策としてPNGの半透明画像を使うことにしました。
これなら上にくる画像が透明になることもないし、カウンターのレイヤーも下に潜らない。
IE6は半透明PNGには対応していないので、IE6だけ半透明フィルターを指定することでIEの問題もするりと回避。
見た目ではフィルターなのか画像なのかわからないから、まあいいや。