<-- IE錯誤修正 --> SVG Backgrounds 免費網站背景圖下載,可線上預覽、調整顏色細節 - RiS社群 | FileMaker 中小企業應用



快速發表主題
返回   RiS社群 | FileMaker 中小企業應用 > 交流平台 / 老少咸宜 (General forums) > 創意新點子 + 遇(預)見新未來 + IT 新知/技術 (Future) > 精選好用APP等相關網站資源 (Website Reviews)

精選好用APP等相關網站資源 (Website Reviews) 本區除了同步注入"免費資源網路社群 "最新資訊外,也不定時將一些提供更多值得關注的App或網站介紹,盡量滿足男女老少們喜愛!


FileMaker 教學 FileMaker 14 教學課程 FileMaker 教學
FileMaker 課程(僅接受公司/單位或1對1專屬教學

輕鬆學會FileMaker
帶你認識FileMaker

FileMaker俱樂部 加入FileMaker獲取官方資訊 FileMaker俱樂部
FileMaker俱樂部

回覆
 
LinkBack 主題工具 顯示模式
  #1 (permalink)  
舊 2018-02-13
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
燈泡 SVG Backgrounds 免費網站背景圖下載,可線上預覽、調整顏色細節

Click the image to open in full size.

如果開發網站或網路服務,可能會需要用到背景圖,以往很多時候會使用 PNG 格式來當做背景,像是 Caself 提供 800 種免費紋理背景圖片就是透過 PNG 檔案來製造出的背景效果,不過現階段來說 SVG 會是更好的選擇,SVG 有什麼特色呢?它不但檔案容量更小、高解析度、可以自由縮放,而且也被主要瀏覽器支援,更重要的是具備可自訂性,不需繪圖軟體就能做到!



若你對於 SVG 向量圖格式不熟,其實只要透過 CSS 程式碼就能將它加入成為網站背景,例如之前介紹過的 Hero Patterns 就能產生免費 SVG 重複背景圖,可自訂前景、背景色或透明度,而且不用下載任何圖片,只需將程式碼加入網站就能套用漂亮的背景圖案。

本文要推薦的SVG Backgrounds」是另一款提供免費網站背景圖的服務,提供多種 SVG 格式的圖案素材,可直接線上預覽、調整顏色或細節,再產生 CSS 程式碼後匯出。比較特別的是 SVG Backgrounds 收錄各式各樣差異性很高的背景圖,每一個圖案都有不一樣的可自訂細節。

如果在開發網站或設計部落格需要用到背景圖,可自訂的 SVG 格式或許是個更適切的選擇。

網站名稱:SVG Backgrounds
網站鏈結:https://www.svgbackgrounds.com/

使用教學

STEP 1

開啟 SVG Backgrounds 網站,可從右邊看到網站收錄的所有圖案。

Click the image to open in full size.

點選圖案就能「Preview」預覽直接套用在背景的效果。

Click the image to open in full size.

STEP 2

在預覽模式下,每個 SVG 背景圖左上角都會有可自訂化選項,例如調整顏色、透明度或是圖形大小等等,調整後會立即更新顯示於網站中。

Click the image to open in full size.

如果你覺得這些圖案和自訂器擋在網站中間無法好好預覽圖案效果,也可以點選左上角的「Hide UI」將操作介面暫時隱藏,只要移動一下滑鼠這些功能就會回復。

Click the image to open in full size.

STEP 3

調整完成後,將「CSS Output」輸出的內容直接複製到網站 CSS 樣式表,就能在特定部分載入 SVG 背景圖設計。前面有提到 SVG 圖的特色是容量小(甚至可轉為一段程式碼)、高解析度、可自由縮放且被大部分瀏覽器支援,因此在使用上就更為輕巧便利。

Click the image to open in full size.

值得一試的三個理由:
  1. 提供各種 SVG 格式的網站背景素材免費下載
  2. 可線上預覽效果,調整顏色或各項細節
  3. 將產生的 CSS 語法放入網站樣式表就能顯示
喜歡 SVG Backgrounds 免費網站背景圖下載,可線上預覽、調整顏色細節 嗎?歡迎將免費資源網路社群加入書籤,以 FacebookTwitterGoogle+ 追蹤更新,獲取更多科技新知及免費資源相關介紹教學。

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.


來源...

回覆時引用此篇文章
回覆
相似的主題
主題 主題作者 討論區 回覆 最後發表
FlatIcon 超過 12,000 個平面化圖示設計,免費下載(SVG、PNG、WebFont 格式) wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2013-10-09 02:29 PM
iconmonstr 免費簡約風圖示集(PNG、SVG 格式) wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2012-09-18 11:25 PM
強化IE,微軟加入SVG工作小組 Bing 創意新點子 + 遇(預)見新未來 + IT 新知/技術 (Future) 0 2010-01-07 01:54 PM


主題工具
顯示模式

發表文章規則
不允許您發表新主題
不允許您發表文章
不允許您上傳附件
不允許您編輯自已的文章

開啟 BB 代碼
關閉 HTML 程式碼
Trackbacks are 關閉
Pingbacks are 關閉
Refbacks are 開啟



所有時間均為 +9。現在的時間是 06:03 AM
Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2018,Jelsoft Enterprises Ltd.
Advertisement System V2.6 By   Branden
RiS 社群 ( 感謝正洋資訊顧問有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger



Content Relevant URLs by vBSEO 3.6.0 PL2