延伸：想了解這個功能的設計背景，請看〈讓您的網站門面更吸睛！Banner「背景遮罩」自訂功能上線〉。
前言#
一張好的 Banner（橫幅）圖片，能在 3 秒內抓住訪客的眼球，並告訴他們「我們是誰」。但許多人在設計時常犯一個錯誤：只顧圖片漂亮，卻忘了文字才是資訊的主角。今天我們就來教大家如何利用後台新上線的「圖片背景遮罩」功能，輕鬆做出專業級的網站首頁。
操作步驟教學#
Banner 三步驟：上傳、文案、遮罩#
- 上傳合適的圖片： 在設定區左側上傳您的圖片。請注意，系統建議的高度為 400px。為了避免圖片變形，建議您先裁切好適合當寬版背景的圖片。
- 輸入動人的文案： 在右側輸入您的標題與內容。
- 標題：這是您的品牌 Slogan，建議控制在 30 個字以內（如截圖提示），簡短有力最能打動人心。
- 內容：這裡可以補充您的經營理念或核心價值，讓訪客更了解您。
- 選擇遮罩風格（關鍵步驟）： 這是本次更新的重點！請看中間的「圖片背景遮罩」選項：
- 如果您的照片是深色夜景、星空或單純色塊，請選「無遮罩+白字」。
- 如果您的照片是風景照、產品情境照或色彩豐富的圖片，請選「黑色遮罩+白字」。這層薄薄的黑影能壓低背景干擾，讓白色文字瞬間浮現，質感滿分。
- 如果您的品牌走日系、極簡或醫療專業風格，不妨試試「白色遮罩+黑字」，這會讓網站看起來乾淨明亮。
為什麼要使用遮罩？#
在網頁設計中，這叫做「提升對比度」。直接把字打在照片上，常常會因為照片某個角落太亮或太花，導致字體「隱形」。透過系統內建的遮罩功能，您不需要專業修圖軟體，就能達到設計師等級的視覺平衡，讓訪客一眼就能讀懂您的訊息。
延伸閱讀：功能設計背景與相關內容#
常見問題
上傳的圖片有建議的尺寸嗎？
如後台提示，圖片高度固定為 400px，寬度則建議至少 1920px（Full HD），這樣在寬螢幕電腦上瀏覽時才不會模糊。
標題一定要寫嗎？可不可以只放圖？
雖然欄位可以留空，但我們強烈建議您撰寫標題。這不僅是為了讓訪客理解內容，對於 SEO（搜尋引擎優化） 也有幫助，因為 Google 機器人是透過文字來認識您的網站的。
我想用紅色的遮罩或是黃色的字可以嗎？
目前系統提供的是經過設計師調配、最符合大眾閱讀習慣的三種經典組合（黑/白/無）。這能避免配色失誤導致網站看起來雜亂，確保您的網站始終保持專業與美觀。
手機版跟桌機版要分別設計首頁圖嗎？
建議分開、效果差很多。桌機版橫幅圖約 1920×800 px、適合大尺寸全景圖；手機版直幅圖約 750×900 px、適合人物特寫或商品近拍。秒站後台 Banner 設定有「桌機圖」「手機圖」兩個欄位、可以分別上傳。如果只想上傳一張、建議：第一、選 4:3 比例、相對通用；第二、主視覺放正中（手機顯示會裁邊）；第三、避免關鍵文字放邊緣（手機會被遮）。但實測分別設計、手機版 CTR 比共用一張高 25–40%、值得多一點工。
怎麼讓首頁圖上的文字夠醒目？
三個關鍵：第一、開遮罩（深色遮罩 70% 透明度）、讓文字後面有對比；第二、文字描邊（CSS text-shadow 或加 1px 黑邊）、避免亮背景看不到；第三、字型選粗體（700 以上）、字級 36px 以上（桌機版）。秒站 Banner 編輯器內建這些選項、不用寫 CSS。實測沒做這些處理的首頁、按 CTR 平均 1.2%；做完後 3.8%、提升 3 倍。
首頁圖選用原則是什麼？
三條原則：第一、「人」優於「物」——首頁有人臉的 CTR 比純產品圖高 2 倍（神經科學原理、人腦對人臉敏感）；第二、「動作」優於「靜態」——人在做事的圖（喝咖啡、用筆電、跑步）比擺拍肖像有故事感；第三、「真實」優於「修飾」——80% 修圖的廣告風會被新世代訪客本能跳過、用相對真實的場景反而停留時間更長。秒站推薦的免費圖庫：Unsplash（藝術照風格）、Pexels（生活實用）、Openverse（CC 授權無顧慮）。