文字疊加

使用漸層和圖像文字填充為您的設計添加流行的視覺趣味。

透過使用背景漸層和圖像文字疊加來吸引網站訪客的注意力,以提升您的標題簡報。透過滾動效果給他們留下深刻的印象,該效果可以在文字字元中顯示背景圖像。

透過使用背景剪輯,標題填滿了從紫色到紅色到橙色的漸層顏色。

在本教學模組中,您將了解如何按照以下步驟將文字疊加整合到專案中的任何文字內容中: 

  1. 漸層文字疊加 
  2. 圖片文字疊加
  3. 固定影像文字覆蓋

漸層文字疊加

首先插入一個 標題 在我們的頁面上並將其字體調整為較重的粗細,以增強其字元中文字覆蓋的可見性: 

  1. 訪問 新增面板
  2. 放下一個 標題 到頁面上
  3. 揭開面紗 風格面板 > 版式 並配置 字體 (例如,「Inter 700 – 大膽」)

申請一個 坡度標題:

  1. 選擇 標題
  2. 訪問 風格面板 > 背景
  3. 點擊下面的“加號”圖標 影像和漸變
  4. 選擇 線性漸變 作為 類型
  5. 定義多個 坡度 根據需要停止並使用 選色器 為每個漸層停止點指定顏色
  6. 修改 角度 透過與方向轉盤點互動、使用箭頭或直接輸入角度來調整漸變

了解更多有關背景漸層的資訊。 

文字的背景漸層顏色設定為從紫色到紅色到橙色。 

筆記: Safari 將透明度的漸層解釋(並內插)為「透明黑」。因此,透明顏色對於 Safari 用戶來說可能會顯示為黑色。 

現在我們來實現魔法 坡度 僅針對 標題 文字: 

  1. 選擇 標題
  2. 使用權 風格面板 > 背景
  3. 從「將背景剪下到文字」中選擇 剪裁 下拉式選單
在“樣式”面板的“背景”部分中的“剪切”下選擇“將背景剪切到文字”,以將漸變剪切到文字。
透過使用背景剪輯,標題填滿了從紫色到紅色到橙色的漸層顏色。

圖片文字疊加

我們再追加一個 標題 到我們的頁面:

  1. 訪問 新增面板
  2. 放下一個 標題 到頁面上
  3. 使用權 風格面板 > 版式 並設定 字體 (例如,「Inter 700 – 大膽」)

利用一個 背景圖 作為我們的文本覆蓋: 

  1. 選擇 標題
  2. 使用權 風格面板 > 背景
  3. 點擊下面的“加號”圖標 影像和漸變
  4. 點擊“選擇圖像”以指定 影像 為您的文字疊加
  5. 將影像調整為 覆蓋
  6. 點擊下面的一個點 位置 客製化影像的展示方式(例如,選擇左下角的點)

尋找有關背景圖像的更多資訊。

粉紅色雲朵的背景圖像設定為覆蓋標題,其圖像位置位於其影響的標題的左下角。 

我們將重複與之前相同的過程,將漸變剪輯到文字: 

  1. 選擇 標題
  2. 使用權 風格面板 > 背景
  3. 從「將背景剪輯到文字」中選擇 剪裁 下拉式選單
“Clip background to text” is chosen under Clipping in the Style panel’s Backgrounds section for clipping a background image to text.
A Heading is filled with an image of pink clouds by utilizing background Clipping.

穩定的圖像文字填充為了使我們的文字表現得像背景圖像中的剪貼畫(視窗),我們將遵循以下步驟。當您的訪客向下捲動頁面時, 標題 文字公開了背後的部分背景圖像。

選擇 標題發射 風格面板 > 背景選擇 穩定的 確保背景覆蓋整個視口並在滾動時保持固定
A background image of pink clouds is set to Fixed under Backgrounds settings in the Style panel. 

好了——用視覺上迷人的文字給你的客人留下深刻的印象!

麥伊凡
Ewan Mak 的最新帖子 (看全部)