header-logo
了解如何以 Wix 建立網站和商家。
了解如何建立、管理並維護 Wix 網站。
管理訂閱、方案與請款單。
處理業務,與會員連繫。
學習如何購買、連結或轉移網站網域。
以進階功能提升效率。
尋求解決方法,了解已知問題,或聯絡我們。
placeholder-preview-image
以課程和教學加強技能。
學習網頁設計、行銷等範疇的秘訣。
學習如何提升來自搜尋引擎的自然網站流量。
以全端平台建立自訂網站。
與專家配對,幫助實現目標。
placeholder-preview-image

Wix 編輯器:變更背景圖片縮放比例、位置和不透明度

2 分鐘
新增背景圖片可讓頁面脫穎而出。您可透過一些細微調整來打造專屬風格。例如,您可以變更圖片的縮放比例和位置、新增捲動效果,或調整圖片本身的不透明度。

變更頁面背景圖片不透明度

不透明度與透明度相反。當您將物件調暗時,即是在增加不透明度。您可以透過增加或減少數值來調整背景圖片的不透明度。

若要變更背景圖片的不透明度:

  1. 前往編輯器中的相關頁面。
  2. 點擊編輯器左側的網站設計
  3. 點擊頁面背景
  4. 選擇您要執行的操作:
    • 預設圖片:從可用選項中選擇預設圖片
    • 上傳自有圖片:按照步驟上傳新圖片。
      • 點擊圖片
      • 點擊上傳媒體
      • 使用偏好的方式上傳圖片。
      • 點擊變更背景
  5. 點擊背景圖片預覽上的設定
    請留意:「設定」僅在已選擇或上傳圖片時才會顯現。
頁面背景設定螢幕截圖,滑鼠浮動於設定、顏色、圖片和影片背景選項上
  1. 拖曳 圖片不透明度 (%) 滑桿,即可調整圖片的顯示程度。
  2. (選填)點擊 圖片後方色彩 色彩方塊並選擇色彩。

為背景圖片新增捲動效果

為圖片新增捲動效果以增添風格。您可以選擇新增視差捲動或凍結效果。這些效果是什麼?
視差捲動允許前景和背景移動,但背景移動速度較慢,提供深度錯覺。新增凍結捲動則表示當訪客上下捲動時,頁面背景不會移動,但上方的內容會移動。

若要新增捲動效果:

  1. 前往編輯器中的相關頁面。
  2. 點擊編輯器左側的網站設計
  3. 點擊頁面背景
  4. 點擊設定
  5. 選擇捲動效果:
    • :無捲動效果。
    • 視差:頁面背景與上方內容以不同速度移動,為訪客營造酷炫有趣的體驗。
      請留意:視差捲動不會在網站的行動裝置版本中顯示。
    • 凍結:這表示當訪客上下捲動時,頁面背景不會移動,但上方的內容會移動。
背景圖片設定螢幕截圖,捲動效果列表顯示無、視差和凍結等強調選項

變更背景圖片縮放比例和位置

變更背景的縮放比例和位置,以適應不同的畫面尺寸。您可以選擇讓圖片背景填滿整個畫面,或維持特定的寬度和高度以符合畫面比例。

若要變更圖片縮放比例和位置:

  1. 新增圖片背景
  2. 點擊背景圖片,然後點擊變更背景
  3. 點擊設定
顯示變更圖片背景選項的螢幕截圖。
  1. 圖片如何縮放?下方選擇一個選項:
    • 填滿:背景圖片會調整大小以符合桌面畫面尺寸。至於行動裝置畫面,則會保持比例。
    • 圖塊:背景圖片會以圖塊排列方式顯示在畫面上。
  2. 位置在哪裡?下方,於格線上選擇一個位置。
正在尋找更多設計靈感嗎?
Wix 設計中心是獲取想法和 網站設計 趨勢的絕佳資源。