要素の背景を半透明にする方法その2。半透明後の画像を表示する - CSSカスタマイズ
普通に画像を配置するCSSを作り、ファイル名を半透明後の画像に置き換える方法です。半透明後の画像を用意する手間がかかる反面、「どのブラウザーを使っても、文字が半透明にならない」利点があります。
CSSのopacityで対応できない時に、おすすめです。
# 次のような場合は、アルファチャンネル付きのPNGファイルを作る方法の方が、簡単です。
# o Internet Exploer 7以上を、表示の前提にしてしまう場合
# o もしくは、Bloggerのように、自分でJavaScriptを追加出来るサイトの場合
# + JavaScriptを使って、今もアクセスがある Internet Explorer 6に対応させる事が出来ます。
**** 半透明後の画像の作り方
(1) 背景に使う画像を用意します。
+ 通常は、ページの背景と要素の背景の2枚です。
(2) 半透明に対応している画像編集ツールを使って、まず、ページの背景を置きます。
+ 私は Adobe Flashで作りましたが、対応しているフリーウェアも色々あるみたいです。
+ Music Makerでも作る事が出来ます。でも、綺麗に作るとなると手間がかかりますので、画像編集ツールを使う方法をおすすめします。
(3) ページの背景を、表示したい透明度で重ねます。
(4) お好みの応じて、透明度を微調整したり、エフェクトなどを加えます。
(5) ファイルに書き出します。
+ 私は、JPEG形式で書き出しました。
+ ページを固定化（background-attachment: fixed;）する場合は、作る画像の縦横の長さを、ページの背景画像と同じにすると、綺麗に画像がつながります。
(6) 後は、普通の画像と同じように指定するだけです。
+ インターネットから見える場所にアップロードして、CSSで、そのファイルを指定します。
**** 使用例
o この文章の背景には、この方法を使いました。
+ 文字が薄くなりませんから、CSSの opacityを使う方法よりも、文章が読み易くなります。
**** メモ
o この方法は、次の場合に相性が良いです。そうでない場合は、他の方法を検討します。
+ ボックスの背景を固定化 ＋ その下の背景も固定化(background-attachment : fixed;)
+ もしくは、ボックスの背景を固定化しない ＋ その下の背景も固定化しない
# 背景の固定化について知りたい方は、「CSS。背景画像固定のポイント」
#
＝＝
関連ページ：
▼要素の背景を半透明にする
▼CSSカスタマイズ
▼制作メモ
＞ アルファチャンネル付きのPNG画像を表示する方法
CSSで透明度を指定する方法。opacity
Flash - 画像を半透明にする
