2010年5月28日金曜日

要素の背景を半透明にする方法その3。アルファチャンネル付きの画像を表示する - CSSカスタマイズ

CSSカスタマイズ。半透明にする
この方法は、画像編集が得意な方に向いています。
o 一度作ってしまえば、CSSを余分に追加しなくても済みます。
o 画像の透明度を変える時、画像編集の知識だけで対応出来ます。

但し、この方法には前提条件があります。問題がある場合は、他の方法を使います。


**** 前提条件
o アルファチャンネル付きPNG画像の表示は、Internet Explorer 6が対応していません。

o JavaScriptが使えるサイトの場合は、Internet Explorer 6への対応が可能です。(例えば、Bloggerブログなど)
   + 検索キーワード 「AlphaImageLoader PNG JavaScript」辺りでWeb検索すると、沢山情報が見つかります。
  もしくは
o Internet Explorer 6への対応を諦める場合も、この方法を使う事が出来ます。


**** 手順
o 普通に画像を使ったページを作ります。
o 半透明にしたい画像を編集して、アルファチャンネル付きPNG画像で書き出します。
   + アルファチャンネル付きPNG画像を作る事が出来る画像編集ソフトを見つけます。
   + フリーウェアでも対応しているものがあります。自分に合ったソフトを探してみて下さい。
   + 後は、そのソフトを使って、画像を加工するだけです。
o 作ったPNG画像を、アップロードします。
o CSSで指定している画像のアドレスを、アップロードしたPNG画像のアドレスに置き換えます。
   + Internet Explorer 6に対応させる場合は、上の手順で調べた手順も行います。


**** メモ
o 今はまだ、CSSカスタマイズ先によっては、Internet Explorer 6に完全対応出来る「半透明後の画像を用意する方法」の方が重宝します。
o 背景を一部固定化する場合、相性があるかもしれません。詳しくは、「半透明後の画像を用意する方法」のメモをご覧下さい。

==
関連ページ:
    ▼要素の背景を半透明にする
    ▼CSSカスタマイズ
    ▼制作メモ
    > ▼要素を移動させる
    半透明後の画像を表示する
    CSSで透明度を指定する。opacity
    Fireworks - 画像を半透明にする