要素の背景を半透明にする方法 - CSSカスタマイズ
CSSで透明度を指定する方法。opacity半透明後の画像を表示する方法
アルファチャンネル付きのPNG画像を表示する方法
--------
o 要素の背景を半透明にする方法は、大きく分けて3通りあります。
o それぞれ、長所と短所がありますので、使う場所に適した方法を使います。
**** 考察
o opacityを指定する方法は、
+ 一番簡単です。
+ 但し、要素の中に文字が入っている場合、「半透明にしつつ、文字をくっきり見せる」のは苦手です。
+ ブラウザーによっては、要素の中の文字も一緒に薄くなる事があるからです。(= むしろCSS仕様)
o 半透明後の画像を用意する方法は、
+ 背景画像を透明に近づけても、要素の中の文字が薄くならない長所があります。
+ Internet Explorer 6以前の、古いブラウザーでも同じ表示をさせる事が出来ます。
+ 但し、背景の固定化をページの一部だけで使っている場合、使えない事があります。
+ また、半透明後の画像を用意する分だけ、上の2つの方法よりも手間がかかります。
o アルファチャンネル付きPNG画像の方法は、
+ Internet Explorer 7以降なら、同じ表示をさせる事が出来るみたいです。
+ 時間と共に、半透明後の画像を用意する方法よりも、こちらの方がおすすめになりつつあります。
+ また、JavaScriptが使えるサイトの場合は、Internet Explorer 5.5くらい以降に対応させる事が出来そうです。(AlphaImageLoaderを使います)
o この他に、CSSハックなどを使って、ブラウザー毎に方式を切り替える事も出来ます。
==
関連ページ:
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
> ▼要素を移動させる
背景画像固定のポイント
リンクやボタンにカーソルを乗せた時に、押し易くする
Fireworks - 画像の背景を透明化する
(2010年5月28日追加。半透明後の画像を用意する方法の長所)