【CSS應用】僞元素變動尺寸透明背景圖框

恆逸教育訓練中心  資深講師  李啟宏

表格背景圖為由Photoshop設計並切割成上、中、下，在左右切割成左中右共九張圖，中間部位請設計為單色內容，四邊請設計為可重複延伸內容，並注意每個切片圖寬與圖高，CSS屬性設定時需準確搭配圖尺寸。

四邊與四角共八個背景的設定，需安排三個<div>搭配before、after設定出四邊四角圖框，第四層<div>安排中間背景。

首先第一層<div>設定類別【.full-width】，以安排右上角圖，背景圖不重複、靠右、靠上，並在<div>加上【class=" full -width"】完成套用。

繼續加上【::before】設定右側邊框圖，上下需空出上下邊框圖的高度，背景圖為中間圖框需直向重複repeat-y、背景圖靠右。加上【::after】設定下側邊框圖，需設定準確高度(同下邊圖高)，座標位置為靠下，且須利用座標值空出左下角與右下角圖寬。

第二層 DIV以安排右下角圖、上邊圖框、左邊圖框，設定類別【.inner】安排右下角圖，設定z-index:2以確保覆蓋住上一層DIV，背景圖位置為靠右靠下，並在<div>加上【class=" inner"】完成套用。

【::before】設定上邊圖框，利用座標位置設定空出左上角與右上角圖寬、準確上邊圖高，水平重複出上邊框。

【::after】設定左邊圖框，利用座標位置設定空出左上角與左下角圖高；垂直重複出左邊圖框。

第三層 DIV以安排左上角圖、左下角圖，設定類別【.inner2】安排左上角圖，設定z-index:3以確保覆蓋住上一層DIV，並在<div>加上【class=" inner2"】完成套用。

【::before】設定左下角圖，座標位置為左、上，與準確左下角圖寬、圖高。

第四層 DIV以安排中間背景色，設定類別【.inner3】利用四邊padding均同四邊圖寬、圖高，以及以【background-clip: content-box;】達成只顯示Padding之內的背景色目的，並在<div>加上【class=" inner3"】完成套用，加上段落文字控制即完成。

【檢視範例】【下載範例】

學習資訊推薦📐

精修DIV+CSS網頁排版設計輕鬆做

多媒體網頁與UI設計師就業養成班