關於此工具
使用 CSS 背景生成器建立
預覽圖片定位、尺寸、重複和漸層覆蓋，然後複製對應的 CSS。
上傳本機圖片以預覽 cover、contain、定位、重複和覆蓋效果。分別設定已發布的資產路徑；產生的 CSS 會使用該路徑，且不會嵌入或上傳來源檔案。
CSS 背景生成器
預覽圖片定位、尺寸、重複和漸層覆蓋，然後複製對應的 CSS。
在你的裝置上執行 免註冊
本機開發者工具
使用方式
- 01
準備您的來源檔案
選擇支援的來源圖片，或在工具提供時從文字範本開始。
- 02
調整結果
上傳本機圖片以預覽 cover、contain、定位、重複和覆蓋效果。分別設定已發布的資產路徑；產生的 CSS 會使用該路徑，且不會嵌入或上傳來源檔案。
- 03
檢查並下載
檢查完整的預覽和輸出設定。下載完成的資產，並保留原始檔案以供比較。
取得更好結果的技巧
- 本機預覽使用您選擇的檔案。您的網站需要託管資產或專案中的路徑。請將圖片上傳或複製到該處，並確保 CSS 路徑能從您的樣式表中解析。
- 在檢查結果前保留原始檔案。
- 以預期的顯示尺寸檢查小文字和細緻邊緣。
- 圖片處理在您的瀏覽器中進行。請在關閉分頁前下載結果。本工具不會覆蓋您的原始檔案。
常見問題
如何使用 CSS 背景生成器？ +
選擇支援的來源圖片，或在工具提供時從文字範本開始。上傳本機圖片以預覽 cover、contain、定位、重複和覆蓋效果。分別設定已發布的資產路徑；產生的 CSS 會使用該路徑，且不會嵌入或上傳來源檔案。
為什麼複製的 CSS 需要圖片路徑？ +
本機預覽使用您選擇的檔案。您的網站需要託管資產或專案中的路徑。請將圖片上傳或複製到該處，並確保 CSS 路徑能從您的樣式表中解析。
我的輸入檔案在哪裡處理？ +
圖片處理在您的瀏覽器中進行。請在關閉分頁前下載結果。本工具不會覆蓋您的原始檔案。
可以使用哪些檔案？ +
接受的輸入：JPG、PNG、WebP、AVIF、GIF。可用輸出：TXT。瀏覽器解碼支援和所選的輸出設定決定了哪些來源檔案可以處理。
需要帳戶嗎？ +
此工具無需帳戶。您可以在儲存到裝置前檢查輸出結果。