要素の背景を半透明にする方法その3。アルファチャンネル付きの画像を表示する - 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 - 画像を半透明にする