簡単に行われる体の背景画像

HTML

多くのサイトで見られる優れた機能は、中央のコンテンツ領域がページの背後にドロップシャドウでオーバーレイされているように見えることです。 これは実際には、単一の背景画像でブログ(または他のWebサイト)の見栄えを良くするための非常に簡単な方法です。

どうしたの?

  1. コンテンツの幅を把握します。 例:750px。
  2. イラストアプリケーション(私はIllustratorを使用)で、コンテンツ領域よりも広い画像を作成します。 例:800px。
  3. 画像の背景を、ブログの両側に表示する背景に設定します。
  4. 背景の上に白い領域を追加します。
  5. 領域のいずれかの側から押し出される白い領域にシャドウを適用します。
  6. 切り抜き領域を幅1ピクセル、高さXNUMXピクセルに設定します。 これにより、ダウンロードする画像がコンパクトになり、すばやくレンダリングできるようになります。
  7. 画像を出力します。

Illustratorを使用して作成した方法は次のとおりです(トリミング領域がはるかに高いことに注意してください...これは、私が何をしているかを確認できるようにするためです)。
イラストレーターの背景

これは、出力が背景画像でどのように見えるかの例です。
背景画像の例

ボディスタイルタグを使用して画像を適用する方法は次のとおりです CSS ファイル。

背景:#B2B2B2 url( 'images / bg.gif')repeat-y center;

背景スタイルタグの詳細は次のとおりです。

  • #B2B2B2 –ページの全体的な背景色を設定します。 この例では、背景画像のグレーと一致するようにグレーになっています。
  • url( 'images / bg.gif')–使用する背景画像を設定します。
  • repeat-y –y軸で繰り返す画像を設定します。 そのため、背景画像はページの上から下に繰り返されます。
  • center –画像をページの中央に設定します。

素晴らしくて簡単…XNUMXつの画像、XNUMXつのスタイルタグ!

2のコメント

  1. 1
  2. 2

どう思いますか?

このサイトはAkismetを使用して迷惑メールを減らします。 コメントの処理方法を学ぶ.