サイトの透明表示

もうひとつ、サイト制作ネタ。
このブログのデザインリニューアルの際に、自分でも挑戦したのですが、多くのブラウザに対応できなくて挫折しました。
バックを透かして、半透明に表示する方法です。


CSSで下記のように記載すれば、
IE, Firefox, Opera, Safariで透明表示ができるとのこと。
filter: alpha(opacity=50);
-moz-opacity:0.50;
opacity:0.50;
ブラウザは意味を理解できない記述は無視するので、この3つを一括で指定します。
1行目はIE用記述で、50%透明(100が100%)。
2行目はFirefox,Netscape用記述で、50%透明(1が100%)。
3行目はOpera,Safari用記述で、50%透明(1が100%)。
参考サイト:Mandarin Design: CSS Opacity and Transparency
IE6以前がPNG画像フォーマットにしっかり対応していれば、透明PNGを使えるのになぁ。
IE7になってやっと対応したけど。
今度デザインリニューアルするときは、半透明で作ってみたいっす。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です