以前に「
全体を半透明にして背景画像を表示する」方法を紹介しました。
しかしこの方法(opacity)は子要素にも作用してしまうため、文字まで半透明になって見づらくなってしまいました。
今回は子要素に作用しない方法(rgba)で、背景のみ半透明にする方法を紹介します。
ただし IE は未対応です。
対応ブラウザは Firefox 3以上，Safari 3以上，Opera 10以上，Chrome となります。
背景を半透明にしたい要素を次のように設定します。
background-color: rgba(255, 255, 255, 0.5); /* 赤, 緑, 青, 透明度 */
カッコの中の４つの数字は左から順に
赤、緑、青の明るさ 0(暗い) ～ 255(明るい)
透明度 0.0(透明) ～ 1.0(不透明)
となっています。
RGBのカラーコードは、
初心者のためのホームページ作り/Web for beginner ホームページ作成支援さんが公開してくれています。
Web Safe Color一覧表/カラーチャート当サイトが公開している共有テンプレートであれば、スタイルシートの末尾に以下を加えると、記事等の背景を半透明にして
bodyに設定した背景画像が透けて見えるようになります。
【standardの場合】/* コンテンツ内側背景の半透明化 */
#main_body {
background-color: rgba(255, 255, 255, 0.8);
}
/* 重なる要素の背景色なし設定 */
.base_table {
background-color: transparent;
}
【lightframeの場合】/* コンテンツ内側背景の半透明化 */
#outline {
background-color: rgba(255, 255, 255, 0.8);
}
/* 重なる要素の背景色なし設定 */
.plugin3_body,
.various_body,
.ently_outline,
.comment_outline,
.trackback_outline,
.plugin1_body,
.plugin2_body {
background-color: transparent;
}
RGBカラーや透明度の数値はお好みにあわせて設定してください。
重なる要素の背景をrgbaで透明化しても構いません。
これで
bodyに設定した背景画像が透けて見えるようになります。
W3Cが草案中であるCSS3が正式勧告されれば、いずれIEでも可能になるかもしれません。
- 関連記事
-
