小粋空間  -  a cheap joke and a play on words site

エントリーを透過して背景画像を薄く表示する

背景画像を固定するのエントリーで背景画像を透過させるカスタマイズを紹介しましたが、背景画像を薄く透過する方法についてご質問を頂きましたので、本エントリーで紹介致します。

以下、公開テンプレートの3カラム固定レイアウトを例にした説明です。リキッドレイアウトの場合、ここで紹介する方法では全てのカラムできれいに透過させることができませんが、部分的に透過する方法を４項で説明しています。
完成サンプルはいずれもエントリーの最後のリンクからご覧ください。

１．背景色の削除

カラム横に表示される背景色の設定（赤色部分）をを削除します。この背景色の代わりに背景画像を表示します。

body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #36414d;
}

２．背景画像の表示

CSSに body セレクタを追加して背景画像を指定します。ここでは background-attachment プロパティを追加して画像を固定していますが固定しない場合は不要です。

body {
    background-image: url(hogehoge.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
}

３．ブログ全体を透過する

２項の body セレクタに下記の filter プロパティおよび opacity プロパティ（青色部分）の追加します。これでブログ全体を透過して背景画像を表示することができます。

body {
　　　　　：
　　　　（略）
　　　　　：
    filter: Alpha(opacity=80);
    opacity:0.8;
}

プロパティ値にある「80」 や「0.8」がブログ全体の透明度を表しますのでお好きな比率に調整してください。

４．リキッドレイアウトの場合

本サイトで公開しているリキッドレイアウトテンプレートはCSSの制約上、左右サイドバーの余白部分について背景画像を薄く表示することができません。ということでここでは中央カラムのみ透過する方法を紹介します。

２項および３項の設定を行った後、.blog セレクタに background プロパティを設定してください。

.blog {
    padding: 10px;
    font-size: small;
    color: #36414d;
    background: #ffffff;
}

公開テンプレートに設定したサンプル（リキッドレイアウト／固定レイアウト）

画像は Suggestive Contour Gallery より拝借しました。

2006.03.10 追記
Firefoxで正常に表示されていなかったため、CSSを修正しました（@import 文が誤ってました）。

• 
• Tweet