輕鬆完成身體背景圖片

在許多站點上都可以找到的一個不錯的功能是，中心內容區域似乎覆蓋頁面，並在頁面後面帶有陰影。 實際上，這是一種非常簡單的方法，可以通過單個背景圖像使您的博客（或其他網站）看起來不錯。

它是如何完成的？

1. 找出內容的範圍。 例如：750px。
2. 在您的插圖應用程序（我使用Illustrator）中構建比內容區域寬的圖像。 例如：800px。
3. 將圖像的背景設置為您希望博客兩邊都具有的背景。
4. 在背景上添加白色區域。
5. 在從該區域的任一側突出的白色區域上應用陰影。
6. 將裁切區域的寬度設置為高1像素。 這將使下載的圖像美觀且緊湊，可以快速渲染。
7. 輸出圖像。

這是我使用Illustrator構造它的方式（請注意，我的作物區域高得多……這是為了讓您可以看到我在做什麼）：

這是輸出與背景圖像的外觀示例：

這是在您的身體中使用您的身體樣式標籤應用圖像的方法 的CSS 文件。

背景：＃B2B2B2 url（'images / bg.gif'）重複-y中心；

以下是背景樣式標籤的剖析：

• ＃B2B2B2 –設置頁面的整體背景顏色。 在此示例中，為灰色以匹配背景圖像上的灰色。
• url（'images / bg.gif'）–設置您要使用的背景圖像。
• 重複y –將圖像設置為在y軸上重複。 因此背景圖片將從頁面的頂部到底部重複。
• center –將圖像設置在頁面中心。

簡單易用...一張圖片，一張樣式標籤！