內容目錄
歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略！想要設計網站背景或卻又苦於無靈感嗎？今天要介紹的是一個免費背景生產工具 – 「 CSS Background Patterns 」，提供快速複製 CSS Background Patterns 產生的圖片背景 CSS 語法，接著就讓我們一起看下去吧！
CSS Background Patterns 是什麼
CSS Background Patterns 是由 MagicPattern 所提供的一個線上免費工具，目前已提供了 21 種不同的背景樣式，所有的背景都可以線上即時預覽顯示，並一鍵複製該樣式的 CSS 樣式，直接套用，完全不用下載或託管圖片檔案，讓網頁維持在最精簡狀態，避免因為載入圖片而造成延遲問題，使用者還能自訂背景、前景色、不透明和間距數值，不僅省去自己設計的時間，還不需要撰寫程式碼。
CSS Background Patterns 使用教學
第一步：開啟「CSS Background Patterns」網站後，往下捲動即可看到各種背景範例。
第二步：選擇背景範例，並按下預覽，背景範例則會直接出現在該網頁的背景中。
第三步：透過上排編輯列可自訂「背景色」、「前景色」、「不透明度」、「間距」，調整後會立即反應在該網頁的背景中，讓使用者預覽效果。
第四步：選擇「 Copy CSS Code 」即可複製 CSS 原始碼，若想輸出圖片可點擊「 Export as image 」還可以自訂輸出圖片的大小。
ChatPDF 免費線上 PDF 學習神器，你不想看的文件讓AI幫你看！
https://www.design-hu.com.tw/webmaster-tools/chatpdf.html
UI Buttons 免費網頁動態按鈕素材，輕鬆踏入網頁設計CSS 的世界！
https://www.design-hu.com.tw/webmaster-tools/iconbros-elegantthemes.html
結語
若想要設計網站背景，但不會寫 CSS，亦或是你善於寫 Code 卻對設計一竅不通嗎？使用 CSS Background Patterns 可以幫助你加快工作的腳步，省去設計及撰寫的時間，直接在網站中挑選喜歡的背景、修改數值，一鍵複製 CSS Code ，即可獲得獲得好看的背景樣式。
那今天的分享就到這裡告一段落了，如果想了解最新網站知識，也可以到 鵠崙設計 官網看看，我們下次的教學見～
架站資源相關文章：
網站資訊文章推薦
通用 Google Analytics 即將停止服務，快來確認資源有沒有影響！
CTR、CPM、CPC、CPA是什麼？一次搞懂20個網路廣告用語！
行銷組合4P到4C？擬定行銷策略前必須了解的消費者觀點！
