輕鬆完成身體背景圖片

HTML

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

它是如何完成的?

  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 –將圖像設置在頁面中心。

簡單易用...一張圖片,一張樣式標籤!

2 個評論

  1. 1
  2. 2

你覺得呢?

本網站使用Akismet來減少垃圾郵件。 了解您的評論如何處理.