CSSで透明度を指定する方法 opacity - 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画像を表示する