Banner 背景遮罩自訂功能 2026 上線｜讓首頁標題在任何圖片上都清晰可讀

內容目錄 顯示

延伸：想直接動手操作，可以先看這篇教學〈如何設計完美的網站首頁圖？善用「遮罩」與「文字」打造品牌形象〉。

簡介

網站的首頁橫幅（Banner）就像是實體店面的招牌，是訪客進入網站的第一印象。過去，您是否曾遇到這樣的困擾：挑了一張很漂亮的照片當背景，結果上面的標題文字卻因為背景太花或太亮而看不清楚？為了讓您能更自由地選用圖片，同時兼顧文字的清晰度，我們在後台正式推出了「Banner 圖片背景遮罩」切換功能！

功能說明

這項新功能位於圖片設定區塊中，我們提供了三種最符合現代網頁設計美學的模式供您選擇：

三種遮罩模式，分別適合什麼圖片

無遮罩 + 白字：適合本身色調較暗、畫面乾淨的圖片，能呈現最原始的圖片質感。
黑色遮罩 + 白字：最萬用的選擇！如果您喜歡色彩鮮豔或細節較多的照片，加上一層半透明黑色遮罩，能立刻讓白色的標題文字跳出來，既保留圖片氛圍又確保易讀性。
白色遮罩 + 黑字：適合想要營造明亮、清新或文青風格的品牌，搭配深色文字，整體視覺更顯優雅。

優勢

透過這個功能，您不再需要先用 Photoshop 把圖修暗或調整對比度，只要上傳圖片，在後台一鍵切換遮罩設定，系統就會自動為您完成文字配色與背景處理。這不僅節省了您的製圖時間，更能確保無論換什麼照片，您的品牌 Slogan 都能清晰地傳達給每一位訪客。

歡迎登入後台嘗試看看，為您的網站換上一個更有質感的新門面吧！

延伸閱讀

如何設計完美的網站首頁圖？善用「遮罩」與「文字」打造品牌形象

重點整理

切換遮罩顏色後，文字顏色會自動變嗎？

會的。系統會根據您選擇的遮罩自動搭配最適合的文字顏色（例如選「黑色遮罩」會自動配「白字」；選「白色遮罩」會配「黑字」），確保視覺上的對比度與閱讀舒適性。

如果我選擇「無遮罩」，文字看不清楚怎麼辦？

如果選擇無遮罩，建議您挑選「畫面較暗」或「留白較多」的照片。如果照片本身很亮，建議改選「黑色遮罩」模式，這樣不需要換圖也能讓文字清晰可見。

這個設定會影響手機版的顯示嗎？

會的，這個設定是全站通用的。無論是電腦版還是手機版，都會套用您設定的遮罩風格，確保所有裝置上的閱讀體驗一致。

Banner 遮罩在哪些頁面會用到？

三個主要場景：第一、網站首頁的英雄區（Hero Section）、放主標題與 CTA、是訪客第一眼看到的關鍵；第二、文章／部落格列表頁的封面圖、文章標題會疊在圖上；第三、品牌故事頁、活動頁、產品頁的開場 Banner。所有用到「圖片+文字疊加」的頁面都需要遮罩、否則文字會被圖片背景吃掉。秒站的設計系統把遮罩做成全站變數、改一處全網站 Banner 一致。

影片背景的 Banner 也支援遮罩嗎？

支援、用法跟靜態圖一樣。秒站的 Hero 區塊支援上傳 mp4 / webm 影片背景、上層加遮罩讓文字醒目。注意：影片 Banner 對 LCP（Core Web Vitals 之一）影響大、建議：第一、影片限制在 5–10 秒並 loop（不超過 5 MB）；第二、提供「靜態圖 fallback」、行動裝置或慢網路時顯示靜態圖；第三、不要播聲音、所有瀏覽器都會擋自動播放有聲影片。秒站 Banner 編輯器自動處理這三點。

遮罩透明度可以調嗎？

可以、調整範圍 0%（完全透明、看圖片）到 100%（完全不透明、看不到圖片）。建議的甜蜜點：50–70%——既能讓圖片可見、又能讓文字夠對比。30% 以下文字會被圖片干擾；80% 以上圖片變成裝飾（為什麼還要放圖？）。秒站 Banner 編輯器有預設四個常用值（30 / 50 / 70 / 90%）、按一下套用。進階：可以用 gradient 遮罩（上深下淺、左暗右亮）、營造焦點區、適合有特定元素需要強調的圖。