FVS素材填充方式

適用場景：安裝了「FVS大屏編輯模式」插件的使用者，可參考本文了解 FVS 範本的相關功能。

注：不支援行動端。

1.1 版本

1.2 功能簡介

在 FVS 中設定頁面背景、組件邊框背景、圖片組件和視頻組件時，都涉及到素材填充方式的設定。本文將要講解的是填充方式的種類及效果。

設定物件及其支援的填充方式如下表所示：

注：當存在點九圖填充時，適應、填充、拉伸分類為「普通填充」。

普通填充效果如下表所示：

普通填充方式	說明	效果
適應	圖片寬高比不變，等比拉大/縮減圖片，確定寬/高充滿頁面/組件即可
填充	圖片寬高比不變，圖片大小不變，從左上角開始依次用圖片填充頁面/組件，直到填滿
拉伸	圖片寬度拉伸至頁面/組件寬度，圖片高度拉伸至頁面/組件高度

設定點九圖的目的主要是為了圖片的四個角不拉伸漸變，所以只有「組件邊框背景」和「頁面背景」支援設定點九圖。

且只有設定了圖片的「點九圖填充」之後，才可以選擇「點九圖填充」。

4.1 設定點九圖

1）若選擇素材時使用「我的資源」，需在 FVS資源複用中心 設定點九圖，將滑鼠懸浮於圖片，點選「設定點九圖」彈出設定框。如下圖所示：

2）若選擇素材時使用「自訂上傳」，上傳圖片後，選中圖片，滑鼠懸浮在選中的圖片上時，點選「設定點九圖」彈出設定框。如下圖所示：

4.2 點九圖效果說明

3）透過拉伸四條線，可以將圖片劃分為四類區域，如下圖所示：

• 紅色區域寬度高度不變

• 綠色區域高度不變，寬度拉伸，使得圖片充滿頁面寬度

• 黃色區域寬度不變，高度拉伸，使得圖片充滿頁面高度

• 藍色區域高度和寬度拉伸，使得圖片充滿整個頁面

使用「點九圖填充」時，可選擇 3 種不同的倍數效果，紅色區域的寬高會按照倍數調整。如下圖所示：