• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
TechMoon 科技月球

TechMoon 科技月球

免費工具、WordPress、虛擬主機、 科技前端

  • 科技新知
  • 月球精選
  • 線上工具
  • 虛擬主機
    • Bluehost 主機
    • A2 Hosting 主機
  • WordPress
    • WordPress 教學
    • WordPress 主題
    • WordPress 外掛
  • 免費資源
  • 優惠資訊
  • 自我提升
    • Excel 教學
    • 網路行銷
  • Udemy 免費課程
  • 虛擬主機總覽
目前位置: 首頁 / 免費資源 / CSS Background Patterns – 21+ 免費線上背景 CSS 樣式,可即時預覽與設定顏色間距及透明度並一鍵複製
CSS Background Patterns - 21+ 免費線上背景 CSS 樣式,可即時預覽與設定顏色間距及透明度並一鍵複製

CSS Background Patterns – 21+ 免費線上背景 CSS 樣式,可即時預覽與設定顏色間距及透明度並一鍵複製

Last Updated on 2020-10-20 By Sliven Leave a Comment

Bluehost 虛擬主機 4 折 60% OFF 優惠折扣
A2 Hosting Coupon
2 分鐘閱讀

今天介紹的 CSS Background Patterns 是由 MagicPattern 所提供的一個線上項目,目前在該頁面中,已經提供了 21 種不同的背景樣式,所有的背景都可以線上即時預覽顯示,並且能夠一鍵複製該樣式的 CSS 樣式,直接使用在自己的專案中。

這個項目和之前我所介紹的 CSS box-shadow 很相似,一個是利用「box-shadow」來呈現背景陰影的效果,而 CSS Background Patterns 則是利用 CSS 中的「background-color」來展現不同的背景樣式。

如果你想要了解其他更多有關 CSS 相關的線上免費資源,可以參考:

  • CSS box-shadow examples by CSS Scan – 免費提供 82 種 Box-shadow CSS 陰影樣式,隨點擊複製使用 CSS 程式碼
  • 3D Book Image CSS Generator – 免費線上建立 3D 書本展示效果,可設定圖片與連結並產生 CSS 與 HTML 程式碼
  • 如何在 WordPress 中自定義滾動條?兩個方法教你快速設定!

網站名稱:CSS Background Patterns by MagicPattern
網站網址:https://www.magicpattern.design/tools/css-backgrounds

目錄
  1. 1. CSS Background Patterns 簡介教學
  2. 2. 你可能有興趣
  3. 3. 更多相關文章

CSS Background Patterns 簡介教學

Step 1

進入頁面後,你可以在下方瀏覽各種 CSS 樣式,你可以點選每個 CSS 樣式的右上角「Preview pattern」按鈕,就可以立即套用到目前頁面的背景,讓你能夠看到實際的效果:

點選 Preview pattern 預覽該背景樣式
點選 Preview pattern 預覽該背景樣式
Step 2

套用效果之後,你還可以透過上方的自定義功能,來調整背景的顯示樣式,你可以透過改變「Back Color」來改變背景顏色,透過「Front Color」來改變前景顏色,透過「Opacity」來改變透明度,最右邊的按鈕則可以關閉背景預覽模式:

客製化背景樣式功能
客製化背景樣式功能
Step 3

如果有你想要的 CSS 樣式,就可以點選右上角左邊的「Copy CSS code」按鈕,就能夠一鍵複製該 CSS 樣式的程式碼,如果你有在上方調整過顏色、透明度或間距,它也會直接應用在所有的樣式設定當中:

一鍵複製 CSS 程式碼
一鍵複製 CSS 程式碼
Step 4

如果你自己本身有很特別的 CSS 背景樣式想要分享,那麼也能透過點選上方的「Submit your own CSS pattern」按鈕,開啟郵件將你的想法分享給作者,他們就有可能會將你的 Idea 加入到這個網站當中,展現更多不同的背景樣式:

分享你的背景樣式程式碼給作者
分享你的背景樣式程式碼給作者
CSS Background Patterns - 21+ 免費線上背景 CSS 樣式,可即時預覽與設定顏色間距及透明度並一鍵複製

CSS Background Patterns 評價推薦心得

  • 即時預覽背景效果
  • 客製化背景的顏色、間距與透明度
  • 一鍵複製 CSS 程式碼

你可能有興趣

  • Neumorphism CSS Generator – 新擬態風格圖形樣式產生器,線上客製化最新軟 UI 風格與產生 CSS 程式碼
  • CSS box-shadow examples by CSS Scan – 免費提供 82 種 Box-shadow CSS 陰影樣式,隨點擊複製使用 CSS 程式碼
  • Ray.so – 免費程式碼轉換圖片線上工具,將代碼製作成精美的色彩圖片可自由客製化圖片外觀
  • Adobe Photoshop Express – 免費線上圖片編輯服務,提供圖片裁切、調整大小、修飾與套用濾鏡效果
  • Wunderstock – 超過 1 千萬 CC0 免費圖片,提供壓縮後圖片與免費線上圖片編輯工具
  • Diff Checker Text – 免費線上檢查文字或檔案不同之處,可支援文字、圖片、PDF 檔案、Excel 檔案多種格式
  • Logaster – 免費 Logo 線上產生器,一秒建立網站 Logo 與 Favicon 打造獨特品牌 Logo 圖示
  • OFFF.to – 無須註冊免費縮短網址服務,可直接在網址列當中縮短網址並獲得分析數據
  • Speedcheck – 免費線上測速工具,快速測量網路上傳/下載速度與延遲的真實數據
  • YoutubeDLD – 一鍵免費下載 Youtube 影片,在網址加上 DLD 即可 Download
  • Internxt Drive – 替代 Google Drive 免費 2 GB 雲端空間服務,採用加密與分佈式技術保護你的網路資料
  • Screenity – 強大且免費的開源教學影片錄製工具,能錄製螢幕畫面與輸入文字動畫的 Chrome 擴充功能

更多相關文章

  • Heroicons - 免費商用 Icons SVG 線上圖標,可直接在 HTML 中使用 CSS 類別元素顯示 Icons
  • 如何優化 WordPress 網站,提升網站速度?初學者也能自己優化網站的 4 個方法
  • 如何在 WordPress 中自動顯示 WebP 圖片格式
  • Bluehost 教學 - 2020 Black Friday/Cyber Monday 70% 特價優惠 - 全年最低價格每月低至 $2.65 美元
  • CSS.GG - 700+ 開源免版權圖標免費下載,支援 Figma 格式檔案,並提供 .css、.svg、.tsx、.fig、.xd、.json、.xml 格式下載
  • Emblemicons - 免費開源圖標 Icons,高達 1000+ 個產品開發、設計與業務展示的圖標樣式免費下載
  • LineIcons - 超過 2000+ 個線形圖標庫,專為設計師與開發人員設計的圖標 Icons 免費下載
  • 如何在 WordPress 中自定義滾動條?兩個方法教你快速設定!
  • 2020 年網站頁面載入速度對於 Google SEO 排名的影響
  • 思源黑體 Noto Sans TC - 由 Google 提供的免費線上 Web Font,讓你免費就能擁有好看的中文字型
  • Ionicons - 1200+ 免費精美圖標 Icons 開源下載,專為 Web、iOS、Android、桌面應用程式所開發
  • SocialBook Background Remover - 線上去背神器替代 Photoshop,使用強大 AI 系統自動快速去背

如果你喜歡這篇文章,請幫我們將這篇文章分享出去。你也可以在 Facebook 與 Instagram 上按讚追蹤我們,也歡迎加入 Facebook 粉絲團和我們一同交流!

所屬分類: 免費資源, 線上工具 標籤: CSS, CSS Background Patterns, CSS 樣式

關於 Sliven

每日分享科技新知、免費資源以及 WordPress、虛擬主機相關主題,任何問題歡迎在科技月球下方留言,或是發送 Email 至 [email protected] 與我聯繫。

讀者互動

發佈留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Primary Sidebar

追蹤我們

站內搜尋

最新文章

  • Neumorphism CSS Generator – 新擬態風格圖形樣式產生器,線上客製化最新軟 UI 風格與產生 CSS 程式碼
  • Ray.so – 免費程式碼轉換圖片線上工具,將代碼製作成精美的色彩圖片可自由客製化圖片外觀
  • Humanotion – 免費 192 個 Avatar 頭像與 6 種不同背景,採 CC0 許可授權可商用大頭貼圖像
  • G Suite 教育版更名為 Google Workspace for Education,並取消無限制儲存空間限制至 100 TB
  • Adobe Photoshop Express – 免費線上圖片編輯服務,提供圖片裁切、調整大小、修飾與套用濾鏡效果
  • Wunderstock – 超過 1 千萬 CC0 免費圖片,提供壓縮後圖片與免費線上圖片編輯工具
  • Diff Checker Text – 免費線上檢查文字或檔案不同之處,可支援文字、圖片、PDF 檔案、Excel 檔案多種格式
  • Logaster – 免費 Logo 線上產生器,一秒建立網站 Logo 與 Favicon 打造獨特品牌 Logo 圖示
  • Lens – Mac 免費開源圖片格式轉換工具,可批次處理大量圖片支援 JPG、PNG 與 GIF 格式
  • 【WordPress 付費主題免費下載】Vihan | Personal & Travel WordPress Blog Theme
Bluehost best deal from TechMoon $2.95/月
Bluehost 獨家優惠
現在透過 TechMoon 專屬優惠折價券購買 Bluehost 主機,享有每月 $2.95 美元的獨家超低優惠價格,要搶要快!
自動套用優惠
立即購買!

熱門內容

  • LOADING.IO - 免費線上 Loading 載入動畫、文字、背景產生器,大量提供各種前端素材免費資源
  • Dropbox Transfer - 上限 100 MB ~ 100 GB 線上檔案免費快傳,不限對象又安全的傳送大型檔案
  • Bluehost WordPress 教學 - 詳細圖文教你如何從購買主機到安裝 WordPress 網站 Bluehost 中文教學
  • SiteGround SG Optimizer - 免費又強大的 WordPress 緩存快取外掛,加快網站速度的好幫手
  • iconmonstr - 4496+ 可商用 CC0 大量圖標 Icons 免費下載,另提供 Iconic Font 字體線上使用
  • CSS box-shadow examples by CSS Scan - 免費提供 82 種 Box-shadow CSS 陰影樣式,隨點擊複製使用 CSS 程式碼
  • Screely - 免費將圖片快速轉成網頁預覽樣式的線上工具,前端設計師的好幫手!
  • Iconpie - 快速免費產生網站圖標 Icons,上傳圖片後自動產生 Web、iOS、Android 圖標
  • Shutterstock - 每月免費 10 張圖片下載,首月免費試用,無需付費隨時可以取消
  • Iconshock - 提供超過 200 萬免費圖標,附上來源可作為個人使用,$99 美元即可終身可商業使用

相關文章

  • BgEraser – 免費線上去除背景圖片,使用機器學習與 AI 技術,自動過濾圖片背景
  • Darkmode.Js – 快速幫網站加入 Dark Mode 深色主題、黑暗版本、夜間模式自動轉換功能
  • SVG Repo – 免費 SVG 圖標與向量圖示免費下載,高達 300,000+ 的免版權可商用圖標集任你下載
  • 超過 40 個線上學習網站 – 網頁設計、程式語言、各種領域線上課程免費/付費資源索引
  • PlagiaShield – 免費線上抄襲檢查器,掃描網站內容尋找剽竊的對象,解決導致網站排名下降的問題
  • Squoosh 免費線上圖片壓縮工具,Google 推出可離線使用跨平台功能
  • Tencent Lemon Cleaner 騰訊檸檬清理 – 超好用的 Mac 清理軟體工具,加速你的 Mac 電腦
  • SocialBook Background Remover – 線上去背神器替代 Photoshop,使用強大 AI 系統自動快速去背
  • 如何在 WordPress 中自定義滾動條?兩個方法教你快速設定!
  • Weighted Pros and Cons – 線上優劣利弊分析工具,可添加權重使優點缺點分析結果更加正確
Bluehost 虛擬主機 4 折 60% OFF 優惠折扣
A2 Hosting Coupon
TechMoon 科技月球 © 2021.
Theme by StudioPress
DMCA.com Protection Status
  • 免責聲明