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

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

Posted at March 6,2006 1:10 AM
Tag:[CSS, Image]

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

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

1.背景色の削除

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

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;
}

2.背景画像の表示

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

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

3.ブログ全体を透過する

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

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

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

4.リキッドレイアウトの場合

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

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

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

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

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

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

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる from デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
この方法を使えば透過PNGをIE6以下のバージョンで綺麗に表示することができるので、デザインの幅もグッと広がることだと思うのですが。。。問題は。。。この方... [続きを読む]

Tracked on January 18, 2007 2:20 AM
コメント

いつもお世話になております。早速カスタマイズエントリーありがとございます。早速、カスタマイズチャレンジしましたが「Mozilla Firefox」では、透過できているようなのですがIEでは透過しませんでした。今、現在IEとMozilla Firefoxの両方でカスタマイズ時に確認しているのですが時々他のカスタマイズでもIEの方でうまく表示できない時があります。この問題が解決できず困っています。また、お手数ですがサポート宜しくお願いします。

[1] Posted by panser : March 7, 2006 12:23 AM

何度もすみません。それと、この透過カスタマイズを設定するとエントリーの画像等がスクロール時に微妙に波打つような感じにもなります。この問題についてもお手数ですがアドバイス宜しくお願い致します。

[2] Posted by panser : March 7, 2006 12:28 AM

>panserさん
こんばんは。
ご質問の件ですが、こちらで用意しているサンプルではご報告のような事象は発生しておりませんので、HTMLマークアップかCSSの他の設定が何か干渉していると思われます。
一旦テンプレートを元に戻して、透過の状態から別のカスタマイズを追加してみてはいかがでしょうか。
複雑な設定の解析については確認に数時間?数日要すると思われるので、現在お引き受けするのは物理的に困難です。申し訳ございません。

以上です。
それではよろしくお願い致します。

[3] Posted by yujiro : March 10, 2006 1:03 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)