版面配置詞條 3-15

滿版區塊Full-bleed Section

也常叫做：滿版、全幅、Full Bleed

你可能會這樣說

看過別的網站有一張大圖或色塊橫跨整個螢幕、沒有左右留白，自己做出來卻總是四周有一圈白邊，抓不到原因。

滿版區塊是寬度吃滿整個瀏覽器的區塊：大圖、影片背景、整段深色色帶。它最有電影感，代價是檔案要控制——一張沒壓縮的滿版照片可以把整站速度拖垮。

常見搭配是滿版圖上疊深色遮罩＋白色大標，文字才讀得清楚；遮罩透明度從 50% 上下起跳再微調。

內文區不要跟著滿版走，記住「滿版給視覺、限寬給文字」，一行字控制在 40 字內最好讀。

✕ 內縮有白邊

大圖被限制在中間

兩側留白，氣勢斷一半

✓ 滿版＋遮罩

山與海之間的環島之旅文字疊在半透明遮罩上，讀得清楚

寬度吃滿螢幕，遮罩保住可讀性

滿版給視覺、限寬給文字；圖上要疊半透明遮罩，字才不會糊進背景。

圖 3-16　滿版區塊吃滿螢幕寬，加遮罩保住文字可讀性。

中文就可以

請在首頁第二屏做一個滿版區塊：
背景圖寬度 100% 滿版、高度 70vh，圖檔先壓到 200KB 以內。
疊黑色遮罩透明度 50%，中間放白色 44px 大標與一行副標。
文字容器最大寬 720px 置中，左右留白至少 24px。
手機上高度改 60vh，改用直式構圖的重點區域。