在許多站點上都可以找到的一個不錯的功能是,中心內容區域似乎覆蓋了頁面,並在頁面後面放置了陰影。 實際上,這是一種非常簡單的方法,可以通過單個背景圖像使您的博客(或其他網站)看起來不錯。
它是如何完成的?
- 找出內容的範圍。 例如:750px。
- 在您的插圖應用程序(我使用Illustrator)中構建比內容區域寬的圖像。 例如:800px。
- 將圖像的背景設置為您希望博客兩邊都具有的背景。
- 在背景上添加白色區域。
- 在從該區域的任一側突出的白色區域上應用陰影。
- 將裁切區域的寬度設置為高1像素。 這將使下載的圖像美觀且緊湊,可以快速渲染。
- 輸出圖像。
這是我使用Illustrator構造它的方式(請注意,我的作物區域高得多……這是為了讓您可以看到我在做什麼):
這是輸出與背景圖像的外觀示例:
這是在您的身體中使用身體樣式標籤應用圖像的方法 的CSS 文件。
背景:#B2B2B2 url('images / bg.gif')重複-y中心;
這是背景樣式標籤的剖析:
- #B2B2B2 –設置頁面的整體背景顏色。 在此示例中,為灰色以匹配背景圖像上的灰色。
- url('images / bg.gif')–設置您要使用的背景圖像。
- 重複y –將圖像設置為在y軸上重複。 因此背景圖片將從頁面的頂部到底部重複。
- center –將圖像設置在頁面中心。
簡單易用...一張圖片,一張樣式標籤!
這個帖子一直是dugg!
http://www.digg.com/design/Body_Background_Images_Done_Easily
謝謝。 為我工作得很好!