要素の背景を半透明にする方法その2。半透明後の画像を表示する - CSSカスタマイズ

要素の背景を半透明にする方法その2。半透明後の画像を表示する - CSSカスタマイズ

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 - 画像を半透明にする

CSSで透明度を指定する方法 opacity - CSSカスタマイズ

CSSで透明度を指定する方法 opacity - CSSカスタマイズ

CSSカスタマイズ。半透明にする ▲＞

opacityは、要素の背景を半透明にする、一番簡単な方法です。

o ブラウザーによっては、文字も半透明になります（むしろ、CSS仕様です）ので、指定する透明度によっては、工夫が必要になります。


**** 手順
o 0が透明です。1行目と2行目の単位にご注意下さい。
o 4行ありますが、これは有名どころの複数のブラウザーに対応する為です。
----------------
-ms-filter: "alpha(opacity=70)"; /* 範囲は0-100。Internet Explorer 8 */
filter : alpha(opacity=70); /* 範囲は0-100。Internet Explorer 6, 7 */
-moz-opacity : 0.7; /* 範囲は0-1。古いFirefox/Netscape */
opacity : 0.7; /* 範囲は0-1。Safari3/Opera 9.5/Firefox 3.5/CSS3新標準の予定 */
----------------

o 指定しても半透明にならない場合は、後ろに !importantを付けてみて下さい。優先順位が上がります。
----------------
-ms-filter: "alpha(opacity=70)" !important; /* このような感じで */
----------------


**** メモ
** opacity方式の欠点について
o CSSで透明度を指定した時の欠点は、一部のブラウザー(Firefoxなど）で、文字まで半透明になる事です。
o 私がzoomeマイページをカスタマイズした時は、平行して、日記のタイトルの文字の色を濃くしました。
o それでも文字の薄さを解決できない所には、「半透明後の画像を表示する」「アルファチャンネル付きのPNG画像を表示する」を使う方法があります。

** 1行目の記述について
o Internet Explorer 8の為に、最初の行が必要になりました。
o この行が必要になるのは、最近の規格で厳密に作ったページを表示する時です。
o なお、1行目-ms-filterの値は「"」で囲みます。2行目filterの値は「"」で囲みません。

** -khtml-opacityを載せなかった理由
o Safariブラウザのバージョン1.1 に対応させる為に、-khtml-opacity: 0.7; という書き方があるみたいです。でも、次の理由で、上には載せませんでした。
  (1) 現在、この古いバージョンを使っている方は、ほとんど居ないみたいです。
  (2) また、このバージョンで-khtml-opacityを指定すると、見栄えが変になる不具合に出会うらしいという情報を、Web検索で見つけました。
  (3) そして、to_dkでは、このバージョンでは動作確認していません。

** 参考資料
o ▽Microsoft CSS ベンダー拡張（MSDN）
o ▽Safari の CSS 独自拡張あるいは先行実装など（娘娘飯店しるきぃうぇぶ）


＝＝
関連ページ：
    ▼要素の背景を半透明にする
    ▼CSSカスタマイズ
    ▼制作メモ
    ＞ 半透明後の画像を表示する
    アルファチャンネル付きのPNG画像を表示する

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

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