CSSによるアルファ(透明度)

opacityを使ったCSSによる透明度の設定で、ロールオーバーのように見せかけることも可能です。
Chrome最新/IE6-8/Firefox最新/Opera最新/Safari最新で確認済み。

プロパティ 対応ブラウザ
opacity モダンブラウザ全般(通常の指定)
filter IE7以前対応
-moz-opacity FF1.5以降対応
-ms-filter IE8以降対応
opacity: 0.70;
filter: alpha(opacity=70);
-moz-opacity: 0.70;
-ms-filter: "alpha(opacity=70)";

数字はそれぞれ%として解釈されるので、
これだとロールオーバー時に70%になります。

p.bnr a:hover img {
  opacity: 0.70;
  filter: alpha(opacity=70);
  -moz-opacity: 0.70;
  -ms-filter: "alpha(opacity=70)";
}

と設定することでロールオーバー時に色を薄くできます。
バナーなどでロールオーバー画像を用意する手間が省けます。

p.bnr a:hover {
  opacity: 0.70;
  filter: alpha(opacity=70);
  -moz-opacity: 0.70;
  -ms-filter: "alpha(opacity=70)";
}

という風にimgを省いてしまうとIE6で動きませんので注意してください。

1件のコメント

コメントを残す

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