先日、パソコン教室くりっく のお客さんからエキサイトブログのスキン編集に関するある質問を受けたとき、その場ではよい解決方法が見つからなかったので、あとから調べてみました。
そのお客さんがお使いのスキン(スタイルシート)では、以下のようなやり方で写真に重ねた文字枠に透明度を設定していました。
background: #fff;
filter: alpha(opacity=60); -moz-opacity:0.6; opacity:0.6;
この方法だと、透明度が子要素(文字)に継承されるために ↓ こんなふうに文字色までうすくなってしまいます。
我が家の ちゃむ です。
そこで、文字色に影響を与えない透明度の設定方法があるかどうか調べてみました。
ひとつ見つかったのは、以下のようにスタイルシートを設定する方法です。
background: #fff;
background: rgba(255, 255, 255, 0.6);
この方法だと、透明度が子要素(文字)に継承されませんので ↓ このように文字色を濃くすることができます。
我が家の ちゃむ です。
ただし、この方法の場合は Internet Explorer 8 以前のブラウザだと文字枠に透明度が設定されません。(Internet Explorer 以外の主要なブラウザでは透明度がうまく設定されます。)
どっちの方法も一長一短ですなぁ・・・。
