2010年5月20日木曜日

要素の背景を半透明にする方法 - CSSカスタマイズ

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日追加。半透明後の画像を用意する方法の長所)